Tell us what’s happening:
Step 9, says when you press Q, W, E, A, S, D, Z, X, or C the audio to the corresponding element’s src should be played. So I did this with a keydown event and got the element that corresponds to the key pressed, but it doesn’t pass step 9 for some reason. Can anyone help please? I don’t know what I am doing wrong. Any help is appreciated. Thank you.
Your code so far
<!-- file: index.html -->
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Drum Machine</title>
<link rel="stylesheet" href="styles.css"/>
</head>
<body>
<div id="drum-machine">
<div id="pad-bank">
<button class="drum-pad" id="Q-btn">Q
<audio class="clip" id="Q" src="https://cdn.freecodecamp.org/curriculum/drum/Heater-1.mp3"></audio>
</button>
<button class="drum-pad" id="W-btn">W
<audio class="clip" id="W" src="https://cdn.freecodecamp.org/curriculum/drum/Heater-2.mp3"></audio>
</button>
<button class="drum-pad" id="E-btn">E
<audio class="clip" id="E" src="https://cdn.freecodecamp.org/curriculum/drum/Heater-3.mp3"></audio>
</button>
<button class="drum-pad" id="A-btn">A
<audio class="clip" id="A" src="https://cdn.freecodecamp.org/curriculum/drum/Heater-4_1.mp3"></audio>
</button>
<button class="drum-pad" id="S-btn">S
<audio class="clip" id="S" src="https://cdn.freecodecamp.org/curriculum/drum/Heater-6.mp3"></audio>
</button>
<button class="drum-pad" id="D-btn">D
<audio class="clip" id="D" src="https://cdn.freecodecamp.org/curriculum/drum/Dsc_Oh.mp3"></audio>
</button>
<button class="drum-pad" id="Z-btn">Z
<audio class="clip" id="Z" src="https://cdn.freecodecamp.org/curriculum/drum/Kick_n_Hat.mp3"></audio>
</button>
<button class="drum-pad" id="X-btn">X
<audio class="clip" id="X" src="https://cdn.freecodecamp.org/curriculum/drum/RP4_KICK_1.mp3"></audio>
</button>
<button class="drum-pad" id="C-btn">C
<audio class="clip" id="C" src="https://cdn.freecodecamp.org/curriculum/drum/Cev_H2.mp3"></audio>
</button>
</div>
<p id="display"></p>
</div>
<script src="script.js"></script>
</body>
</html>
/* file: script.js */
const btns = document.querySelectorAll(".drum-pad");
const display = document.querySelector("#display");
const desArr = [{"Q": "woo", "W": "hoo", "E": "wee", "A": "pee", "S": "bee", "D": "voo", "Z": "see", "X": "moo", "C": "hoho"}];
btns.forEach((btnEl) => btnEl.addEventListener("click", (event) => {
event.currentTarget.children[0].currentTime = 0;
event.currentTarget.children[0].play();
display.textContent = desArr[0][event.currentTarget.children[0].id];
}));
window.addEventListener("keydown", (event) => {
const key = event.key.toUpperCase();
const clip = document.getElementById(key);
if(clip){
clip.currentTime = 0;
clip.play();
display.textContent = desArr[0][key];
}
});
/* file: styles.css */
Your browser information:
User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/18.6 Safari/605.1.15
Challenge Information:
Build a Drum Machine - Build a Drum Machine