Build a Drum Machine - Build a Drum Machine

Curriculum Help
1

Tell us what’s happening:

Test 9 fails, which checks that keyboard presses result in sounds being played. Keyboard presses trigger the sound when I test, so I assume the test is looking for something specific with the event.

This works locally, including when I rapidly press keys.

Also for bonus: how can I check test conditions myself so that I can resolve these issues in the future?

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 id="Q" class="drum-pad">
          Q
          <audio id="Q" class="clip" src="https://cdn.freecodecamp.org/curriculum/drum/Heater-1.mp3" data-name="Heater 1"></audio>
        </button>
        <button id="W" class="drum-pad">
          W
          <audio id="W" class="clip" src="https://cdn.freecodecamp.org/curriculum/drum/Heater-2.mp3" data-name="Heater 2"></audio>
        </button>
        <button id="E" class="drum-pad">
          E
          <audio id="E" class="clip" src="https://cdn.freecodecamp.org/curriculum/drum/Heater-3.mp3" data-name="Heater 3"></audio>
        </button>
        <button id="A" class="drum-pad">
          A
          <audio id="A" class="clip" src="https://cdn.freecodecamp.org/curriculum/drum/Heater-4_1.mp3" data-name="Heater 4"></audio>
        </button>
        <button id="S" class="drum-pad">
          S
          <audio id="S" class="clip" src="https://cdn.freecodecamp.org/curriculum/drum/Heater-6.mp3" data-name="Clap"></audio>
        </button>
        <button id="D" class="drum-pad">
          D
          <audio id="D" class="clip" src="https://cdn.freecodecamp.org/curriculum/drum/Dsc_Oh.mp3" data-name="Open-HH"></audio>
        </button>
        <button id="Z" class="drum-pad">
          Z
          <audio id="Z" class="clip" src="https://cdn.freecodecamp.org/curriculum/drum/Kick_n_Hat.mp3" data-name="Kick-n'-Hat"></audio>
        </button>
        <button id="X" class="drum-pad">
          X
          <audio id="X" class="clip" src="https://cdn.freecodecamp.org/curriculum/drum/RP4_KICK_1.mp3" data-name="Kick"></audio>
        </button>
        <button id="C" class="drum-pad">
          C
          <audio id="C" class="clip" src="https://cdn.freecodecamp.org/curriculum/drum/Cev_H2.mp3" data-name="Closed-HH"></audio>
        </button>
      </div>
    </div>
    <script src="script.js"></script>
  </body>
</html>

/* file: script.js */
// grab display so we don't need to query it over and over
const display = document.getElementById("display");

const buttons = document.querySelectorAll(".drum-pad");
buttons.forEach(currentValue => 
  currentValue.addEventListener("click", () => triggerSound(currentValue.id))
)

addEventListener("keydown", event => triggerSound(event.key));

let currentSound = null;

function triggerSound(key) {
  const upperCaseKey = key.toUpperCase();
  const audioToPlay = document.querySelector("audio#" + upperCaseKey);
  if (audioToPlay !== null) {
    display.innerText = audioToPlay.dataset.name;
    if (currentSound !== null) {
      currentSound.pause();
    }
    audioToPlay.currentTime = 0;
    audioToPlay.play();
    currentSound = audioToPlay;
  }
}

/* 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

GitHub Link: freeCodeCamp/curriculum/challenges/english/blocks/lab-drum-machine/6762ec275cef87635acc4fe3.md at main · freeCodeCamp/freeCodeCamp · GitHub

2

Solved by finding this post: Build a Drum Machine - Build a Drum Machine
The event listener for keydown needs to be attached to document. Anything else and the test does not pass