JS Drum Kit

01 - JavaScript Drum Kit/index-START.html

@@ -58,7 +58,27 @@
   <audio data-key="76" src="sounds/tink.wav"></audio>
 
 <script>
+  function playSound(e) {
+    const audio = document.querySelector(`audio[data-key="${e.keyCode}"]`);
+    const key = document.querySelector(`.key[data-key="${e.keyCode}"]`);
+    if(!audio) return; //stop function all together
+    // note if call .play on audio element already playing, it won't play again. so if press "F" in successsion it will only play every 5 sec
+    audio.currentTime = 0; //rewind to the start, so that it can be played many times quickly
+    audio.play();
+    // CSS: transition:all .07s;
+    //.playing adds transform:scale(1.1);
+    key.classList.add('playing');
+  }
 
+  function removeTransition(e) {
+    if (e.propertyName !== 'transform') return; // skip it if its not a transform
+    // here this = key div
+    this.classList.remove('playing');
+  }
+
+  const keys = document.querySelectorAll('.key');
+  keys.forEach(key => key.addEventListener('transitionend', removeTransition));
+  window.addEventListener('keydown', playSound);
 </script>
 
 

01 - JavaScript Drum Kit/style.css

@@ -23,7 +23,7 @@ body,html {
   margin:1rem;
   font-size: 1.5rem;
   padding:1rem .5rem;
-  transition:all .07s;
+  transition:all .1s;
   width:100px;
   text-align: center;
   color:white;