-
- 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
+
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
-
+ function playSound(e) {
+ const audio = document.querySelector(`audio[data-key="${e.keyCode}"]`);
+ const key = document.querySelector(`div[data-key="${e.keyCode}"]`);
+ if (!audio) return;
+ key.classList.add("playing");
+ audio.currentTime = 0;
+ audio.play();
+ }
-
+ const keys = Array.from(document.querySelectorAll(".key"));
+ keys.forEach((key) =>
+ key.addEventListener("transitionend", removeTransition)
+ );
+ window.addEventListener("keydown", playSound);
+
+