Build a Drum Machine - Keypress Fails (test #8)

amandappollard · May 16, 2025, 6:38pm

Tell us what’s happening:

I can’t figure out why my tests aren’t passing. At first I was doing everything in a few lines through loops, but even when I break it all the way down like I have here this test:

“8. 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.”

doesn’t pass, despite the fact that it works for me.

Your code so far

<!-- file: index.html -->
<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
       <meta name="viewport" content="width=device-width, initial-scale=1.0" />
       <link href="https://fonts.googleapis.com/css2?family=Roboto+Mono&display=swap" rel="stylesheet" />
         <link href="https://fonts.googleapis.com/css2?family=Lato&family=Roboto+Mono&display=swap" rel="stylesheet" />
       <link rel="stylesheet" href="styles.css">
    <title>Drum Machine</title>
  </head>
  <body>
    <h2>Drum Pad Machine</h2>
    <div id="drum-machine">
      <div id="pad-bank">

        <button class="drum-pad" id="heater-1" type="button" value="Heater 1">Q
          <audio class="clip" src="https://cdn.freecodecamp.org/curriculum/drum/Heater-1.mp3" id="Q" value="Heater 1"></audio>
        </button>        
        <button class="drum-pad" id="heater-2" type="button" value="Heater 2">W
          <audio class="clip" src="https://cdn.freecodecamp.org/curriculum/drum/Heater-2.mp3" id="W" value="Heater 2"></audio>
        </button>
        <button class="drum-pad" id="heater-3" type="button" value="Heater 3">E
          <audio class="clip" src="https://cdn.freecodecamp.org/curriculum/drum/Heater-3.mp3" id="E" value="Heater 3"></audio>
        </button>
        <br>
        <button class="drum-pad" id="heater-4" type="button" value="Heater 4">A
          <audio class="clip" src="https://cdn.freecodecamp.org/curriculum/drum/Heater-4_1.mp3" id="A" value="Heater 4"></audio>
        </button>
        <button class="drum-pad" id="clap" type="button" value="Clap">S
          <audio class="clip" src="https://cdn.freecodecamp.org/curriculum/drum/Heater-6.mp3" id="S" value="Clap"></audio>
        </button>
        <button class="drum-pad" id="open-hh" type="button" value="Open High Hat">D
          <audio class="clip" src="https://cdn.freecodecamp.org/curriculum/drum/Dsc_Oh.mp3" id="D" value="Open High Hat"></audio>
        </button>
        <br>        
        <button class="drum-pad" id="kick-n-hat" type="button" value="Kick'n Hat">Z
          <audio class="clip" src="https://cdn.freecodecamp.org/curriculum/drum/Kick_n_Hat.mp3" id="Z" value="Kick'n Hat"></audio>
        </button>
<button class="drum-pad" id="kick" type="button" value="Kick">X
          <audio class="clip" src="https://cdn.freecodecamp.org/curriculum/drum/RP4_KICK_1.mp3" id="X" value="Kick"></audio>
        </button>
        <button class="drum-pad" id="closed-hh" type="button" value="Closed High Hat">C
          <audio class="clip" src="https://cdn.freecodecamp.org/curriculum/drum/Cev_H2.mp3" id="C" value="Closed High Hat"></audio>
        </button>

      </div>
      <p id="display"></p>
    </div>
    <script src="script.js"></script>
  </body>
</html>

/* file: styles.css */
:root {
    --font-headline: "Roboto Mono", monospace;
  }

  *,
  *::after,
  *::before {
    box-sizing: border-box;
  }

  body {
    font-family: "Roboto Mono", monospace;
    text-align: center;
    
background-color: rgb(106, 7, 106);
  
  }

  h2 {
    color: rgb(255, 208, 255);
  }

  #drum-machine {
    border: 3px solid rgb(247, 164, 247);
    padding: 5%;
    margin: 1% 6%;
    height: 80vh;
    width: 85vw;
    position: fixed;
    border-radius: 10px;
  }

  #pad-bank {
    text-align: center;
  }

  button {
    height: 15vh;
    width: 30%;
    margin-bottom: 2%;
    font-size: 1.75em;
    font-family: monospace;
    position: relative;
    border-radius: 10px;
    background-color: rgb(255, 208, 255);
  }

  #display {
    border:2px solid black;
    height: 10vh;
    text-align: center;
    padding-top: 4%;
    border-radius: 10px;
    background-color: rgb(255, 208, 255);
  }

.clip:hover {
  cursor: pointer;
}

/* file: script.js */
const drumContainer = document.getElementById("drum-machine");
const drumPad = document.getElementById("drum-pad");
const display = document.getElementById("display");
const heater1 = document.getElementById("heater-1");//q
const heater2 = document.getElementById("heater-2");//w
const heater3 = document.getElementById("heater-3");//e
const heater4 = document.getElementById("heater-4");//a
const clap = document.getElementById("clap");//s
const openHighHat = document.getElementById("open-hh");//d
const kickHat = document.getElementById("kick-n-hat");//z
const kick = document.getElementById("kick");//x
const closedHighHat = document.getElementById("closed-hh");//c


function playHeater1() {
  let q = document.getElementById("Q");
  q.play();
  display.innerText = heater1.value;
}

function playHeater2() {
  let w = document.getElementById("W");
  w.play();
  display.innerText = heater2.value;
}

function playHeater3() {
  let e = document.getElementById("E");
  e.play();
  display.innerText = heater3.value;
}

function playHeater4() {
  let a = document.getElementById("A");
  a.play();
  display.innerText = heater4.value;
}

function playClap() {
  let s = document.getElementById("S");
  s.play();
  display.innerText = clap.value;
}

function playOpenHighHat() {
  let d = document.getElementById("D");
  d.play();
  display.innerText = openHighHat.value;
}

function playKickHat() {
  let z = document.getElementById("Z");
  z.play();
  display.innerText = kickHat.value;
}

function playKick() {
  let x = document.getElementById("X");
  x.play();
  display.innerText = kick.value;
}

function playClosedHighHat() {
  let c = document.getElementById("C");
  c.play();
  display.innerText = closedHighHat.value;
}

heater1.addEventListener("click", () => playHeater1());
heater2.addEventListener("click", () => playHeater2());
heater3.addEventListener("click", () => playHeater3());
heater4.addEventListener("click", () => playHeater4());
clap.addEventListener("click", () => playClap());
openHighHat.addEventListener("click", () => playOpenHighHat());
kickHat.addEventListener("click", () => playKickHat());
kick.addEventListener("click", () => playKick())
closedHighHat.addEventListener("click", () => playClosedHighHat());


document.addEventListener("keypress", (e) => {
  if (e.key.toLowerCase() === "q")
  {
    playHeater1();
  }
  if (e.key.toLowerCase() === "w")
  {
    playHeater2();
  }
  if (e.key.toLowerCase() === "e")
  {
    playHeater3();
  }
  if (e.key.toLowerCase() === "a")
  {
    playHeater4();
  }
  if (e.key.toLowerCase() === "s")
  {
    playClap();
  }
  if (e.key.toLowerCase() === "d")
  {
    playOpenHighHat();
  }
  if (e.key.toLowerCase() === "z")
  {
    playKickHat();
  }
   if (e.key.toLowerCase() === "x")
  {
    playKick();
  } if (e.key.toLowerCase() === "c")
  {
    playClosedHighHat();
  }
  
})

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/136.0.0.0 Safari/537.36

Challenge Information:

Build a Drum Machine - Build a Drum Machine

pkdvalis · May 16, 2025, 8:35pm

Does it work every time you hit the key, in a quick and responsive way?

Or does it cut in and out, or play in the middle or sound odd? Sometimes you hit the key and it doesn’t play immediately?

amandappollard · May 16, 2025, 9:36pm

It works immediately. The only time it doesn’t is when I’m actively typing code, but I’m pretty sure it’s not supposed to fire when I’m in the code window. I can successfully click then hit a key immediately after as well.

pkdvalis · May 16, 2025, 9:42pm

If I press a key repeatedly and rapidly it doesn’t trigger the sound every time

amandappollard · May 16, 2025, 9:53pm

I just went to the example, and I’m seeing it should cut off the audio that’s already playing and restart, I was just hitting it the moment the sound ended thinking I had it. I wasn’t being impatient enough with my presses lol. I’m going to go see how I can make that happen. Thanks so much for the help. I feel silly now that I didn’t realize it!

pkdvalis · May 16, 2025, 9:58pm

Don’t feel silly I went through the exact same thing, so that would make us both silly

amandappollard · May 16, 2025, 10:46pm

One thing that’s been so lovely so far is how nice people have been to me as a learner. It’s so encouraging. I definitely needed to reset the audio.currentTime, but it was still failing, so I figured out it wanted me using “keydown” instead of “keypress” in my event handler and finally passed! I hope you have a great rest of you day

system · November 15, 2025, 10:47am

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.

Topic		Replies	Views
Drum Machine Test #6 Incorrectly Fails / User Story Inaccurate JavaScript	5	942	June 1, 2021
Drum Machine - failing to pass Test #6 JavaScript	4	794	February 2, 2021
Drum machine failing on test case #06 and clicking on "RunTest" from FCC widget plays a sound from key 'Q' for some unknown reason! JavaScript	6	525	February 16, 2022
Drum Machine: Failing test #6, DOM error	2	698	January 17, 2021
Drum Machine: Not passing last test	9	2318	January 17, 2021

Build a Drum Machine - Keypress Fails (test #8)

Tell us what’s happening:

Your code so far

Your browser information:

Challenge Information:

Related topics