raw.githubusercontent.com

https://raw.githubusercontent.com/aftabstackcraft/Drum-Machine/refs/heads/main/script.js • 1 KB fetched
Open original page

const drumPad = document.querySelectorAll(".drum-pad");
const display = document.getElementById("display");

function playDrum(eachDrum) {
const audioForPlay = eachDrum.querySelector("audio");
audioForPlay.play();
}

drumPad.forEach((eachDrum) => {
eachDrum.addEventListener("click", () => {
playDrum(eachDrum);
display.textContent = eachDrum.dataset.name;
})
})

document.addEventListener("keydown", (event) => {
event.preventDefault();
drumPad.forEach((eachDrum)=>{
const audioForPlay = eachDrum.querySelector("audio");
if (event.key === audioForPlay.id || event.key === audioForPlay.id.toLowerCase()) {
audioForPlay.play();
display.textContent = eachDrum.dataset.name;
}
})
})