drum-machine make metronome continue on volume, sound, or bpm change

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

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);
 };
 

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 === '') {