diff --git a/drum-machine/README.md b/drum-machine/README.md index da68e97..fb3ca0c 100644 --- a/drum-machine/README.md +++ b/drum-machine/README.md @@ -9,5 +9,3 @@ * [FreeCodeCamp Section](https://www.freecodecamp.org/learn/front-end-libraries/front-end-libraries-projects) ### TODOS - -* make sure metronome continues on volume, sound, or metronome BPM change diff --git a/drum-machine/drumMachine.js b/drum-machine/drumMachine.js index 486612f..cd2d74b 100644 --- a/drum-machine/drumMachine.js +++ b/drum-machine/drumMachine.js @@ -138,17 +138,31 @@ const playSample = (key) => { const metronome = (key) => { let keyDuration = parseInt(sessionStorage.getItem(key+'metronomeTempo')); const sound = document.getElementById(key); + const soundFile = sound.src.slice(36); + const volumeOffSet = sessionStorage.getItem(key+'volume'); sound.volume = getVolume(key); sound.play(); let refreshMetronome = setInterval(function(){ - keyDuration = parseInt(sessionStorage.getItem(key+'metronomeTempo')); + const newKeyDuration = parseInt(sessionStorage.getItem(key+'metronomeTempo')); sound.pause(); sound.currentTime = 0; sound.volume = getVolume(key); sound.play(); + if (volumeOffSet !== sessionStorage.getItem(key+'volume')) { + clearInterval(refreshMetronome); + metronome(key); + } + if (soundFile !== sessionStorage.getItem(key)) { + clearInterval(refreshMetronome); + metronome(key); + } if (sessionStorage.getItem(key + 'metronomeIsPlaying') === 'false') { clearInterval(refreshMetronome); } + if (newKeyDuration !== keyDuration) { + clearInterval(refreshMetronome); + metronome(key); + } },keyDuration); }; diff --git a/drum-machine/makeSelection.js b/drum-machine/makeSelection.js index 28f47da..2ce705e 100644 --- a/drum-machine/makeSelection.js +++ b/drum-machine/makeSelection.js @@ -15,6 +15,7 @@ const volumeMenuArray = ['+30','+20','+10','0','-10','-20','-30']; const stopMetronomes = () => { padsArray.forEach(pad => { sessionStorage.setItem(pad + 'metronomeIsPlaying', 'false'); + makeMetronomeIcons(pad); }); }; @@ -43,14 +44,13 @@ const makeMetronomeSelection = (selection) => { metronomeMenuDisplayed = false; $('#display-middle-left-b').html((drumPadGrid)); $('#menuScrollTip').remove(); - makeAudioControl(padSelectingFor); + makeMetronomeIcons(padSelectingFor); } else if (selection.match(/\d{2,3}/)) { sessionStorage.setItem(padSelectingFor + 'metronomeTempo',Math.round(60000 / parseInt(selection.split(':')[1]))); sessionStorage.setItem(padSelectingFor + 'isMetronome',true); metronomeMenuDisplayed = false; $('#display-middle-left-b').html((drumPadGrid)); $('#menuScrollTip').remove(); - makeAudioControl(padSelectingFor); makeMetronomeIcons(padSelectingFor); } else if (selection === '( cancel -- back )') { if (padSelectingFor === '') { @@ -230,7 +230,7 @@ const makeSelection = (selection) => { menuDisplayed = false; $('#display-middle-left-b').html((drumPadGrid)); $('#menuScrollTip').remove(); - makeAudioControl(padSelectingFor); + makeMetronomeIcons(padSelectingFor); } else if (selection === '( cancel -- back )') { if (fileStringArray.length === 0) { if (padSelectingFor === '') {