From 14e3f337295a208d2d74e00fa1209c559c940173 Mon Sep 17 00:00:00 2001 From: Trent Palmer Date: Fri, 29 May 2020 11:22:40 -0700 Subject: [PATCH] drum-machine update bpm in drumpad when metronome playing --- drum-machine/README.md | 1 - drum-machine/drumMachine.js | 48 ++++++++++++++++------------------- drum-machine/index.html | 18 ++++++------- drum-machine/makeSelection.js | 10 ++++---- 4 files changed, 36 insertions(+), 41 deletions(-) diff --git a/drum-machine/README.md b/drum-machine/README.md index 433394e..da68e97 100644 --- a/drum-machine/README.md +++ b/drum-machine/README.md @@ -11,4 +11,3 @@ ### TODOS * make sure metronome continues on volume, sound, or metronome BPM change -* update bpm in drumpad when metronome playing diff --git a/drum-machine/drumMachine.js b/drum-machine/drumMachine.js index d94e25b..486612f 100644 --- a/drum-machine/drumMachine.js +++ b/drum-machine/drumMachine.js @@ -2,8 +2,7 @@ $(document).ready(function () { initialSamples(); - let volume = sessionStorage.hasOwnProperty("volume") ? - parseInt(sessionStorage.getItem('volume')) : 20; + let volume = sessionStorage.hasOwnProperty("volume") ? parseInt(sessionStorage.getItem('volume')) : 20; $('#volume').slider({ orientation: "vertical", @@ -32,7 +31,7 @@ $(document).ready(function () { }); padsArray.forEach(pad => { - makeAudioControl(pad); + makeMetronomeIcons(pad); }); makeVolumeToolTip('#display-middle-right-f'); @@ -77,20 +76,9 @@ $(document).ready(function () { stopMetronomes(); }); - padsArray.forEach(pad => { - makeMetronomeIcons(pad); - }); - $('#display-top').html('

press "V" to focus Volume so you can adjust with arrow keys

'); }); -const makeMetronomeIcons = (pad) => { - const html = $('#'+pad+'pad').html(); - if (sessionStorage.getItem(pad + 'isMetronome') === 'true') { - $('#'+pad+'pad').html('

' + html + '

'); - } -}; - const makeVolumeToolTip = (element) => { $(element).tooltip({ content: sessionStorage.getItem('volume'), @@ -103,15 +91,15 @@ const makeVolumeToolTip = (element) => { }; const makeAudioControl = (pad) => { - const audioControl = pad + ''; - $('#'+pad+'pad').html(audioControl); + const audioControl = ''; + $('#'+pad+'pad').html(pad + audioControl); }; -const sampleUrlPreFix = "https://trentpalmer.org/drumsamples/" +const sampleUrlPreFix = "https://trentpalmer.org/drumsamples/"; const qweasdzxc = [81,87,69,65,83,68,90,88,67]; const playSample = (key) => { - const audioFileText = $('#'+key[0]).attr('src').slice(36) + const audioFileText = $('#'+key[0]).attr('src').slice(36); $('#display-top').html( "

" + key[0] +": " + audioFileText.replace(/\//g,' ').replace(/-/g,'‑') + "

"); if (sessionStorage.getItem(key[0] + 'isMetronome') === 'false') { const keyDuration = 1000; @@ -142,17 +130,18 @@ const playSample = (key) => { metronome(key[0]); sessionStorage.setItem(key[0]+'metronomeIsPlaying', (sessionStorage.getItem(key[0]+'metronomeIsPlaying') - === 'false' ? 'true' : 'false')); + === 'false' ? true : false)); + makeMetronomeIcons(key[0]); } }; const metronome = (key) => { - let keyDuration = parseBPM(key); + let keyDuration = parseInt(sessionStorage.getItem(key+'metronomeTempo')); const sound = document.getElementById(key); sound.volume = getVolume(key); sound.play(); let refreshMetronome = setInterval(function(){ - keyDuration = parseBPM(key); + keyDuration = parseInt(sessionStorage.getItem(key+'metronomeTempo')); sound.pause(); sound.currentTime = 0; sound.volume = getVolume(key); @@ -163,9 +152,16 @@ const metronome = (key) => { },keyDuration); }; -const parseBPM = (key) => { - const bpm = parseInt(sessionStorage.getItem(key+'metronomeTempo')); - return Math.round(60000 / bpm); +const makeMetronomeIcons = (pad) => { + makeAudioControl(pad); + const html = $('#'+pad+'pad').html(); + if (sessionStorage.getItem(pad + 'isMetronome') === 'true') { + if (sessionStorage.getItem(pad + 'metronomeIsPlaying') === 'false') { + $('#'+pad+'pad').html('

' + html + '

'); + } else { + $('#'+pad+'pad').html('

' + html + ' ' + Math.round(60000 / parseInt(sessionStorage.getItem(pad+'metronomeTempo'))) + '

'); + } + } }; const getVolume = (key) => { @@ -190,7 +186,7 @@ const initialSamples = () => { sessionStorage.setItem(pad + "metronomeIsPlaying",false); } if (!sessionStorage.hasOwnProperty(pad + "metronomeTempo")) { - sessionStorage.setItem(pad + "metronomeTempo","92"); + sessionStorage.setItem(pad + "metronomeTempo","652"); } }); if (!sessionStorage.hasOwnProperty("Q")) { @@ -220,4 +216,4 @@ const initialSamples = () => { if (!sessionStorage.hasOwnProperty("C")) { sessionStorage.setItem("C","Assorted-Hits/Snares/Ludwig-A/CYCdh_LudSnrOffA-08.wav"); } -} +}; diff --git a/drum-machine/index.html b/drum-machine/index.html index f8b98f3..88686f6 100644 --- a/drum-machine/index.html +++ b/drum-machine/index.html @@ -33,35 +33,35 @@
-

Q

+ Q
-

W

+ W
-

E

+ E
-

A

+ A
-

S

+ S
-

D

+ D
-

Z

+ Z
-

X

+ X
-

C

+ C
diff --git a/drum-machine/makeSelection.js b/drum-machine/makeSelection.js index a446588..28f47da 100644 --- a/drum-machine/makeSelection.js +++ b/drum-machine/makeSelection.js @@ -16,7 +16,7 @@ const stopMetronomes = () => { padsArray.forEach(pad => { sessionStorage.setItem(pad + 'metronomeIsPlaying', 'false'); }); -} +}; const reset = () => { sessionStorage.clear(); @@ -45,7 +45,7 @@ const makeMetronomeSelection = (selection) => { $('#menuScrollTip').remove(); makeAudioControl(padSelectingFor); } else if (selection.match(/\d{2,3}/)) { - sessionStorage.setItem(padSelectingFor + 'metronomeTempo',selection.split(':')[1]); + sessionStorage.setItem(padSelectingFor + 'metronomeTempo',Math.round(60000 / parseInt(selection.split(':')[1]))); sessionStorage.setItem(padSelectingFor + 'isMetronome',true); metronomeMenuDisplayed = false; $('#display-middle-left-b').html((drumPadGrid)); @@ -119,7 +119,7 @@ const makeMetronomeSelectionMenuItemToolTipContent = (text) => { } else { return 'set metronome temp for ' + padSelectingFor + ': ' + text.split(':')[1] + ' bpm'; } -} +}; const makeVolumeSelection = (selection) => { if (selection === "keys") { @@ -195,7 +195,7 @@ const makeVolumeSelectionMenuItemToolTipContent = (text) => { } else { return 'set volume offset for ' + padSelectingFor + ': '+ text; } -} +}; const makeSelection = (selection) => { @@ -334,7 +334,7 @@ const makeSelectionMenuItemToolTipContent = (text) => { } else { return 'select for ' + padSelectingFor + ': ' + fileStringArray.join('/') + '/' + text; } -} +}; const makeSelectionMenuItem = (selector) => { return '
' + selector + '
';