maintain state in dom, new 808 sounds

siggy · Sep 12, 2016 · 1366e36 · 1366e36
1 parent 17850ff
commit 1366e36
Show file tree

Hide file tree

Showing 17 changed files with 43 additions and 38 deletions.
diff --git a/index.html b/index.html
@@ -1,5 +1,8 @@
 <!DOCTYPE html>
-
+<!--
+Beatboxer
+Inspired by https://www.youtube.com/watch?v=6O_92BTrUcA
+-->
 <html lang="en">
   <head>
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
@@ -47,63 +50,65 @@
   <body>
     <div id="grid"></div>
     <script>
+      // Init
       const BPM = 120;
       const TICKS = 16;
 
-      var wavs = [
-        'wav/kick.wav',
-        'wav/closed.wav',
-        'wav/perc1.wav',
-        'wav/perc2.wav',
+      // sounds originated from http://808.html909.com
+      var sounds = [
+        'sounds/bass_drum.wav',
+        'sounds/snare_drum.wav',
+        'sounds/low_tom.wav',
+        'sounds/mid_tom.wav',
+
+        // 'sounds/hi_tom.wav',
+        // 'sounds/rim_shot.wav',
+        // 'sounds/hand_clap.wav',
+        // 'sounds/cowbell.wav',
+        // 'sounds/cymbal.wav',
+        // 'sounds/o_hi_hat.wav',
+        // 'sounds/cl_hi_hat.wav',
+
+        // 'sounds/low_conga.wav',
+        // 'sounds/mid_conga.wav',
+        // 'sounds/hi_conga.wav',
+        // 'sounds/claves.wav',
+        // 'sounds/maracas.wav',
       ];
-      var sounds = [];
-
-      for (i = 0; i < wavs.length; i++) {
-        sounds.push({
-          audio: wavs[i],
-          beats: new Array(TICKS).fill(false),
-        });
-      }
 
       var grid = document.getElementById('grid');
       for (var i = 0; i < sounds.length; i++) {
         for (var t = 0; t < TICKS; t++) {
-          var btn = document.createElement("button");
-          btn.className = "beat";
-          btn.dataset.sound = i;
-          btn.dataset.tick = t;
+          var btn = document.createElement('button');
+          btn.className = 'beat';
           btn.addEventListener('click', function() {
-            this.className = this.className === "beat" ? "beat on" : "beat";
-            sounds[this.dataset.sound].beats[this.dataset.tick] =
-              !sounds[this.dataset.sound].beats[this.dataset.tick];
+            this.className = this.className.indexOf(' on') === -1 ?
+              this.className + ' on' :
+              this.className.replace(/\b on\b/,'');
           }, false);
           grid.appendChild(btn);
         }
-        grid.appendChild(document.createElement("p"));
-      }
-
-      function playTick(tick) {
-        for (var i = 0; i < sounds.length; i++) {
-          if (sounds[i].beats[tick]) {
-            new Audio(sounds[i].audio).play();
-          }
-        }
+        grid.appendChild(document.createElement('p'));
       }
 
+      // Drum loop
+      var beats = document.getElementsByClassName('beat');
       var tick = 0;
-      var beats = document.getElementsByClassName("beat");
+      var lastTick = TICKS-1;
       setInterval(function() {
-        var lastTick = tick === 0 ? TICKS-1 : tick-1;
-
         for (var i = 0; i < sounds.length; i++) {
-          beats[i*TICKS + lastTick].className =
-            beats[i*TICKS + lastTick].className.replace(/\b ticked\b/,'');
+          var lastBeat = beats[i*TICKS + lastTick];
+          var beat     = beats[i*TICKS + tick];
 
-          beats[i*TICKS + tick].className += " ticked";
-        }
+          lastBeat.className = lastBeat.className.replace(/\b ticked\b/,'');
+          beat.className += ' ticked';
 
-        playTick(tick);
+          if (beat.className.indexOf(' on') !== -1) {
+            new Audio(sounds[i]).play();
+          }
+        }
 
+        lastTick = tick;
         tick = (tick+1) % TICKS;
       }, 1 / (4*BPM/(60*1000)));
     </script>

diff --git a/sounds/bass_drum.wav b/sounds/bass_drum.wav
diff --git a/sounds/cl_hi_hat.wav b/sounds/cl_hi_hat.wav
diff --git a/sounds/claves.wav b/sounds/claves.wav
diff --git a/sounds/cowbell.wav b/sounds/cowbell.wav
diff --git a/sounds/cymbal.wav b/sounds/cymbal.wav
diff --git a/sounds/hand_clap.wav b/sounds/hand_clap.wav
diff --git a/sounds/hi_conga.wav b/sounds/hi_conga.wav
diff --git a/sounds/hi_tom.wav b/sounds/hi_tom.wav
diff --git a/sounds/low_conga.wav b/sounds/low_conga.wav
diff --git a/sounds/low_tom.wav b/sounds/low_tom.wav
diff --git a/sounds/maracas.wav b/sounds/maracas.wav
diff --git a/sounds/mid_conga.wav b/sounds/mid_conga.wav
diff --git a/sounds/mid_tom.wav b/sounds/mid_tom.wav
diff --git a/sounds/o_hi_hat.wav b/sounds/o_hi_hat.wav
diff --git a/sounds/rim_shot.wav b/sounds/rim_shot.wav
diff --git a/sounds/snare_drum.wav b/sounds/snare_drum.wav