01: add my JavaScript code

skatsuta · skatsuta · commit d0947233ec50 · 2016-12-11T04:01:24.000+09:00
Signed-off-by: Soshi Katsuta &lt;soshi.katsuta@gmail.com&gt;
diff --git a/01 - JavaScript Drum Kit/index-START.html b/01 - JavaScript Drum Kit/index-START.html
@@ -57,9 +57,7 @@
   <audio data-key="75" src="sounds/tom.wav"></audio>
   <audio data-key="76" src="sounds/tink.wav"></audio>
 
-<script>
-
-</script>
+<script src="index.js"></script>
 
 
 </body>
diff --git a/01 - JavaScript Drum Kit/index.js b/01 - JavaScript Drum Kit/index.js
@@ -0,0 +1,34 @@
+class Dram {
+  constructor(key, audio) {
+    this.key = key;
+    this.audio = audio;
+    this.className = 'playing';
+
+    key.addEventListener('transitionend', event => {
+      if (event.propertyName !== 'transform') { return; }
+      key.classList.remove(this.className);
+    });
+  }
+
+  playSound() {
+    this.audio.currentTime = 0;
+    this.audio.play();
+    this.key.classList.add(this.className);
+  }
+}
+
+const keys = Array.from(document.querySelectorAll('.key'));
+const drams = Array.from(document.querySelectorAll('audio'))
+  .reduce((drams, audio) => {
+    const keyCode = audio.dataset.key;
+    const key = keys.find(key => key.dataset.key === keyCode);
+    if (!key) { return; }
+    drams[keyCode] = new Dram(key, audio);
+    return drams;
+  }, {});
+
+window.addEventListener('keydown', event => {
+  const dram = drams[event.keyCode.toString()];
+  if (!dram) { return; }
+  dram.playSound();
+});
