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
+ QW
+ WE
+ EA
+ AS
+ SD
+ DZ
+ ZX
+ XC
+ C