Tell us what’s happening:
I’ve been having trouble because the audio won’t respond to the buttons, so I keep failing #8. I require some assistance.
Your code so far
<!-- 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">
<button class="drum-pad" id="bQ">Q<audio class="clip" src="Heater-1.mp3" id="Q"></audio></button>
<button class="drum-pad" id="bW">W<audio class="clip" src="Heater-2.mp3" id="W"></audio></button>
<button class="drum-pad" id="bE">E<audio class="clip" src="Heater-3.mp3" id="E"></audio></button>
<button class="drum-pad" id="bA">A<audio class="clip" src="Heater-4_1.mp3" id="A"></audio></button>
<button class="drum-pad" id="bS">S<audio class="clip" src="Heater-6.mp3" id="S"></audio></button>
<button class="drum-pad" id="bD">D<audio class="clip" src="Dsc_Oh.mp3" id="D"></audio></button>
<button class="drum-pad" id="bZ">Z<audio class="clip" src="Kick_n_Hat.mp3" id="Z"></audio></button>
<button class="drum-pad" id="bX">X<audio class="clip" src="RP4_KICK_1.mp3" id="X"></audio></button>
<button class="drum-pad" id="bC">C<audio class="clip" src="Cev_H2.mp3" id="C"></audio></button>
</div>
<p id="display"></p>
</div>
</body>
</html>
/* file: script.js */
const buttonQ = document.getElementById("bQ");
const audioQ = document.getElementById("Q");
buttonQ.addEventListener("click", () => {
audioQ.play();
});
const buttonW = document.getElementById("bW");
const audioW = document.getElementById("W");
buttonW.addEventListener("click", () => {
audioW.play();
});
const buttonE = document.getElementById("bE");
const audioE = document.getElementById("E");
buttonE.addEventListener("click", () => {
audioE.play();
});
const buttonA = document.getElementById("bA");
const audioA = document.getElementById("A");
buttonA.addEventListener("click", () => {
audioA.play();
});
const buttonS = document.getElementById("bS");
const audioS = document.getElementById("S");
buttonS.addEventListener("click", () => {
audioS.play();
});
const buttonD = document.getElementById("bD");
const audioD = document.getElementById("D");
buttonD.addEventListener("click", () => {
audioD.play();
});
const buttonZ = document.getElementById("bZ");
const audioZ = document.getElementById("Z");
buttonZ.addEventListener("click", () => {
audioZ.play();
});
const buttonX = document.getElementById("bX");
const audioX = document.getElementById("X");
buttonX.addEventListener("click", () => {
audioX.play();
});
const buttonC = document.getElementById("bC");
const audioC = document.getElementById("C");
buttonC.addEventListener("click", () => {
audioC.play();
});
/* file: styles.css */
Your browser information:
User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/148.0.0.0 Safari/537.36
Challenge Information:
Build a Drum Machine - Build a Drum Machine