Build a Drum Machine - Build a Drum Machine

JavaScript
1

Tell us what’s happening:

Hi everyone,

I wrote the code that plays the sound, when the pad is clicked. But I don’t pass this test:

  1. When you press one of the keys Q, W, E, A, S, D, Z, X, C on your keyboard, the corresponding audio element should play the corresponding sound.

One comment, if I run the test, the sound of the first pad would be played automatically. How do I prevent that?

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">
        <p id="display"></p>
        <button class="drum-pad" id="padQ">Q<audio class="clip" src="https://cdn.freecodecamp.org/curriculum/drum/Heater-1.mp3" id="Q"></button>
        <button class="drum-pad" id="padW">W<audio class="clip" src="https://cdn.freecodecamp.org/curriculum/drum/Heater-2.mp3" id="W"></button>
        <button class="drum-pad" id="padE">E<audio class="clip" src="https://cdn.freecodecamp.org/curriculum/drum/Heater-3.mp3" id="E"></button>
        <button class="drum-pad" id="padA">A<audio class="clip" src="https://cdn.freecodecamp.org/curriculum/drum/Heater-4_1.mp3" id="A"></button>
        <button class="drum-pad" id="padS">S<audio class="clip" src="https://cdn.freecodecamp.org/curriculum/drum/Heater-6.mp3" id="S"></button>
        <button class="drum-pad" id="padD">D<audio class="clip" src="https://cdn.freecodecamp.org/curriculum/drum/Dsc_Oh.mp3" id="D"></button>
        <button class="drum-pad" id="padZ">Z<audio class="clip" src="https://cdn.freecodecamp.org/curriculum/drum/Kick_n_Hat.mp3" id="Z"></button>
        <button class="drum-pad" id="padX">X<audio class="clip" src="https://cdn.freecodecamp.org/curriculum/drum/RP4_KICK_1.mp3" id="X"></button>
        <button class="drum-pad" id="padC">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 display = document.getElementById("display");

drumPad.forEach(pad=>pad.addEventListener("click", ()=>{
  const audio = new Audio();
  audio.src=src.querySelector("audio").src;
  audio.play();
  const currPad = pad.innerText;
  console.log(currPad);
  console.log(audio.src)
}))



/* 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/142.0.0.0 Safari/537.36 Edg/142.0.0.0

Challenge Information:

Build a Drum Machine - Build a Drum Machine

2

Hi @katerynaguguieva

Does clicking the button or pressing the corresponding key on the keyboard produce any sound?

Happy coding

3

yes, there is a corresponding sound. Own for each button

4

oh I only thought about clicking the button…. not about pressing the key on keyboard… sorry must learn to read

5

but still should pass the test with the button click

6

Do either of these logs return a value? Isn’t display supposed to be showing pad.innerText?

Try sending in the event object and logging its target. If you look for its first child, you should be able to get at the clip’s source.

7

Yes, both console logs return a value, but they both are just for me. On this stage I try to pass the story, where clicking the button would return a sound…. Which works but the story isn’t passed

8

oh no, I am dumb. I have to solve the case, where I press the keys on the keyboard. Sorry. Anyways thanks for help with the display! I will implement it now.