-
- A
- clap
-
-
- S
- hihat
-
-
- D
- kick
-
-
- F
- openhat
-
-
- G
- boom
-
-
- H
- ride
-
-
- J
- snare
-
-
- K
- tom
-
-
-
L
-
tink
+
+
+
JS Drum Kit
+
+
+
+
+
+ A
+ clap
+
+
+ S
+ hihat
+
+
+ D
+ kick
+
+
+ F
+ openhat
+
+
+ G
+ boom
+
+
+ H
+ ride
+
+
+ J
+ snare
+
+
+ K
+ tom
+
+
+ L
+ tink
+
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
-
+ var keys = document.getElementsByClassName("key");
+ for (var i = 0; i < keys.length; i++) {
+ keys[i].addEventListener('transitionend', function(e) {
+ e.target.classList.remove('playing');
+ });
+ keys[i].addEventListener('click', function(e){
+ var keyCode = e.currentTarget.getAttribute("data-key")
+ playSound(keyCode);
+ })
+ }
-
+ function playSound(keyCode){
+ var key = document.querySelector(`.key[data-key="${keyCode}"]`);
+ var soundClip = document.querySelector(`audio[data-key="${keyCode}"]`);
+ if (key !== null && soundClip !== null){
+ key.classList.add('playing');
+ soundClip.currentTime = 0;
+ soundClip.play();
+ }
+ }
+
+