drum-machine update bpm in drumpad when metronome playing

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

drum-machine/drumMachine.js

@@ -2,8 +2,7 @@ $(document).ready(function () {
 
   initialSamples();
 
-  let volume = sessionStorage.hasOwnProperty("volume") ?
+  let volume = sessionStorage.hasOwnProperty("volume") ? parseInt(sessionStorage.getItem('volume')) : 20;
-    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('<p id="volumeTip">press "V" to focus Volume so you can adjust with arrow keys</p>');
 });
 
-const makeMetronomeIcons = (pad) => {
-  const html = $('#'+pad+'pad').html();
-  if (sessionStorage.getItem(pad + 'isMetronome') === 'true') {
-    $('#'+pad+'pad').html('<p>' + html + ' <i class="fa fa-refresh"></i></p>');
-  }
-};
-
 const makeVolumeToolTip = (element) => {
   $(element).tooltip({
       content: sessionStorage.getItem('volume'),
@@ -103,15 +91,15 @@ const makeVolumeToolTip = (element) => {
 };
 
 const makeAudioControl = (pad) => {
-  const audioControl = pad + '<audio class="clip" id="'+pad+'" src="'+sampleUrlPreFix+sessionStorage.getItem(pad)+'"></audio>';
+  const audioControl = '<audio class="clip" id="'+pad+'" src="'+sampleUrlPreFix+sessionStorage.getItem(pad)+'"></audio>';
-  $('#'+pad+'pad').html(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( "<p>" + key[0] +": " + audioFileText.replace(/\//g,' ').replace(/-/g,'&#8209;') + "</p>");
   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 makeMetronomeIcons = (pad) => {
-  const bpm = parseInt(sessionStorage.getItem(key+'metronomeTempo'));
+  makeAudioControl(pad);
-  return Math.round(60000 / bpm);
+  const html = $('#'+pad+'pad').html();
+  if (sessionStorage.getItem(pad + 'isMetronome') === 'true') {
+    if (sessionStorage.getItem(pad + 'metronomeIsPlaying') === 'false') {
+      $('#'+pad+'pad').html('<p>' + html + ' <i class="fa fa-refresh"></i></p>');
+    } else {
+      $('#'+pad+'pad').html('<p>' + html + ' ' + Math.round(60000 / parseInt(sessionStorage.getItem(pad+'metronomeTempo'))) + '</p>');
+    }
+  }
 };
 
 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");
   }
-}
+};

drum-machine/index.html

@@ -33,35 +33,35 @@
               <div id="drum-pad-grid">
                 <div class="drum-pad-row">
                   <div class="drum-pad" id="Qpad" title="" onclick="playSample($(this).attr('id'))">
-                    <p>Q</p>
+                    Q
                   </div>
                   <div class="drum-pad" id="Wpad" title="" onclick="playSample($(this).attr('id'))">
-                    <p>W</p>
+                    W
                   </div>
                   <div class="drum-pad" id="Epad" title="" onclick="playSample($(this).attr('id'))">
-                    <p>E</p>
+                    E
                   </div>
                 </div>
                 <div class="drum-pad-row">
                   <div class="drum-pad" id="Apad" title="" onclick="playSample($(this).attr('id'))">
-                    <p>A</p>
+                    A
                   </div>
                   <div class="drum-pad" id="Spad" title="" onclick="playSample($(this).attr('id'))">
-                    <p>S</p>
+                    S
                   </div>
                   <div class="drum-pad" id="Dpad" title="" onclick="playSample($(this).attr('id'))">
-                    <p>D</p>
+                    D
                   </div>
                 </div>
                 <div class="drum-pad-row">
                   <div class="drum-pad" id="Zpad" title="" onclick="playSample($(this).attr('id'))">
-                    <p>Z</p>
+                    Z
                   </div>
                   <div class="drum-pad" id="Xpad" title="" onclick="playSample($(this).attr('id'))">
-                    <p>X</p>
+                    X
                   </div>
                   <div class="drum-pad" id="Cpad" title="" onclick="playSample($(this).attr('id'))">
-                    <p>C</p>
+                    C
                   </div>
                 </div>
               </div>

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 '<div id="foo" class="selectionMenuItem" title="">' + selector + '</div>';