Hi everyone!
I can’t pass the tests 8&9:
When I click one of the buttons, or when I press one of the keys, the corresponding clip is playing. I don’t undestand, what I am doing wrong. Please help!
<!-- file: index.html -->
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Drum Machine</title>
</head>
<body>
<div id="drum-machine">
<div id="pad-bank">
<p id="display"></p>
<button class="drum-pad" id="Q">Q<audio class="clip" src="https://cdn.freecodecamp.org/curriculum/drum/Heater-1.mp3" id="Q"></button>
<button class="drum-pad" id="W">W<audio class="clip" src="https://cdn.freecodecamp.org/curriculum/drum/Heater-2.mp3" id="W"></button>
<button class="drum-pad" id="E">E<audio class="clip" src="https://cdn.freecodecamp.org/curriculum/drum/Heater-3.mp3" id="E"></button>
<button class="drum-pad" id="A">A<audio class="clip" src="https://cdn.freecodecamp.org/curriculum/drum/Heater-4_1.mp3" id="A"></button>
<button class="drum-pad" id="S">S<audio class="clip" src="https://cdn.freecodecamp.org/curriculum/drum/Heater-6.mp3" id="S"></button>
<button class="drum-pad" id="D">D<audio class="clip" src="https://cdn.freecodecamp.org/curriculum/drum/Dsc_Oh.mp3" id="D"></button>
<button class="drum-pad" id="Z">Z<audio class="clip" src="https://cdn.freecodecamp.org/curriculum/drum/Kick_n_Hat.mp3" id="Z"></button>
<button class="drum-pad" id="X">X<audio class="clip" src="https://cdn.freecodecamp.org/curriculum/drum/RP4_KICK_1.mp3" id="X"></button>
<button class="drum-pad" id="C">C<audio class="clip" src="https://cdn.freecodecamp.org/curriculum/drum/Cev_H2.mp3" id="C"></button>
</div>
</div>
<script src = "./script.js"></script>
</body>
</html>
/* file: script.js */
const drumPad = document.querySelectorAll(".drum-pad");
const padArray = Array.from(drumPad);
const display = document.getElementById("display");
const audios = document.querySelectorAll("audio");
const audiosArr = Array.from(audios);
const audio = new Audio();
function playClip(id){
audio.src = audiosArr.find((au)=>au.id === id).src;
audio.play()
}
drumPad.forEach(pad=>pad.addEventListener("click", ()=>{
const currId = pad.id;
playClip(currId);
display.innerText = audio.src.replace(".mp3", "").replace("https://cdn.freecodecamp.org/curriculum/drum/", "");
}))
/*drumPad.forEach((pad)=>pad.addEventListener("click", ()=>{
audio.src = pad.querySelector("audio").src;
audio.play();
display.innerText = audio.src.replace(".mp3", "").replace("https://cdn.freecodecamp.org/curriculum/drum/", "");
})) */
document.addEventListener("keydown", (e)=>{
if(e.key === "Q" || e.key === "q"){
playClip("Q")
}else if(e.key === "W" || e.key === "w"){
playClip("W")
}else if(e.key === "E" || e.key === "e"){
playClip("E")
}else if(e.key === "A" || e.key === "a"){
playClip("A")
}else if(e.key === "S" || e.key === "s"){
playClip("S")
}else if(e.key === "D" || e.key === "d"){
playClip("D")
}else if(e.key === "Z" || e.key === "z"){
playClip("Z")
}else if(e.key === "X" || e.key === "x"){
playClip("X")
}else if(e.key === "C" || e.key === "c"){
playClip("C")
}
})
/* file: styles.css */
User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/141.0.0.0 Safari/537.36
Build a Drum Machine - Build a Drum Machine
dhess
January 14, 2026, 7:45pm
2
It doesn’t look like your display is changing when a key on the keyboard is clicked.
id attributes must have a unique value – more than one element cannot have the same id.
Hi dhess, thank you for checking!
I put the line, which displays the clip name, into the function. Now the display will show something in both cases: clicking on the button and pressing the key. I just understood, it is only required for clicking button.
function playClip(id){
audio.src = audiosArr.find((au)=>au.id === id).src;
audio.play()
display.innerText = audio.src.replace(".mp3", "").replace("https://cdn.freecodecamp.org/curriculum/drum/", "");
}
drumPad.forEach(pad=>pad.addEventListener("click", ()=>{
const currId = pad.id.replace("pad", "");
playClip(currId);
})
I also changed button IDs and corrected the js code… but I still can’t pass these tests.
<button class="drum-pad" id="Qpad">Q<audio class="clip" src="https://cdn.freecodecamp.org/curriculum/drum/Heater-1.mp3" id="Q"></button>
The sounds are still played ba clicking the button and pressing the key, it works
I mean, sounds are played, but tests 8 and 9 are not passed
I’ve edited your post to improve the readability of the code. When you enter a code block into a forum post, please precede it with three backticks to make it easier to read.
You can also use the “preformatted text” tool in the editor (</>) to add the backticks.
See this post to find the backtick on your keyboard.Note: Backticks (`) are not single quotes (').
1 Like
dhess
January 15, 2026, 3:18pm
6
Please post your updated code.
const drumPad = document.querySelectorAll(".drum-pad");
const display = document.getElementById("display");
const audios = document.querySelectorAll("audio");
const audiosArr = Array.from(audios);
const audio = new Audio();
function playClip(id){
audio.src = audiosArr.find((au)=>au.id === id).src;
audio.play()
display.innerText = audio.src.replace(".mp3", "").replace("https://cdn.freecodecamp.org/curriculum/drum/", "");
}
drumPad.forEach(pad=>pad.addEventListener("click", ()=>{
const currId = pad.id.replace("pad", "");
playClip(currId);
}))
document.addEventListener("keydown", (e)=>{
if(e.key === "Q" || e.key === "q"){
playClip("Q")
}else if(e.key === "W" || e.key === "w"){
playClip("W")
}else if(e.key === "E" || e.key === "e"){
playClip("E")
}else if(e.key === "A" || e.key === "a"){
playClip("A")
}else if(e.key === "S" || e.key === "s"){
playClip("S")
}else if(e.key === "D" || e.key === "d"){
playClip("D")
}else if(e.key === "Z" || e.key === "z"){
playClip("Z")
}else if(e.key === "X" || e.key === "x"){
playClip("X")
}else if(e.key === "C" || e.key === "c"){
playClip("C")
}
})
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Drum Machine</title>
</head>
<body>
<div id="drum-machine">
<div id="pad-bank">
<p id="display"></p>
<button class="drum-pad" id="Qpad">Q<audio class="clip" src="https://cdn.freecodecamp.org/curriculum/drum/Heater-1.mp3" id="Q"></button>
<button class="drum-pad" id="Wpad">W<audio class="clip" src="https://cdn.freecodecamp.org/curriculum/drum/Heater-2.mp3" id="W"></button>
<button class="drum-pad" id="Epad">E<audio class="clip" src="https://cdn.freecodecamp.org/curriculum/drum/Heater-3.mp3" id="E"></button>
<button class="drum-pad" id="Apad">A<audio class="clip" src="https://cdn.freecodecamp.org/curriculum/drum/Heater-4_1.mp3" id="A"></button>
<button class="drum-pad" id="Spad">S<audio class="clip" src="https://cdn.freecodecamp.org/curriculum/drum/Heater-6.mp3" id="S"></button>
<button class="drum-pad" id="Dpad">D<audio class="clip" src="https://cdn.freecodecamp.org/curriculum/drum/Dsc_Oh.mp3" id="D"></button>
<button class="drum-pad" id="Zpad">Z<audio class="clip" src="https://cdn.freecodecamp.org/curriculum/drum/Kick_n_Hat.mp3" id="Z"></button>
<button class="drum-pad" id="Xpad">X<audio class="clip" src="https://cdn.freecodecamp.org/curriculum/drum/RP4_KICK_1.mp3" id="X"></button>
<button class="drum-pad" id="Cpad">C<audio class="clip" src="https://cdn.freecodecamp.org/curriculum/drum/Cev_H2.mp3" id="C"></button>
</div>
</div>
<script src = "./script.js"></script>
</body>
</html>
dhess
January 16, 2026, 5:25pm
9
Thanks.
There are two approaches to playing audio: using the Audio() constructor or calling the play() method on an HTML audio element.
Your code already has audio elements with src values, so now that you’ve cleaned up your issue with duplicate id values, you can easily get the audio clip using the id being passed to playClip(). Once you have the audio clip, you can apply its play() method.
You don’t need these variables.
hi dhess, thank you a lot! It worked!
