Front End Development Libraries Projects - Build a Drum Machine

JavaScript
1

Tell us what’s happening:

I get a test failure for this test even thought its working fine. - #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.

Your code so far

const drumPadsData = [
    { key: "Q", id: "Heater-1", name: "Heater 1", src: "https://cdn.freecodecamp.org/curriculum/drum/Heater-1.mp3" },
    { key: "W", id: "Heater-2", name: "Heater 2", src: "https://cdn.freecodecamp.org/curriculum/drum/Heater-2.mp3" },
    { key: "E", id: "Heater-3", name: "Heater 3", src: "https://cdn.freecodecamp.org/curriculum/drum/Heater-3.mp3" },
    { key: "A", id: "Heater-4", name: "Heater 4", src: "https://cdn.freecodecamp.org/curriculum/drum/Heater-4_1.mp3" },
    { key: "S", id: "Clap", name: "Clap", src: "https://cdn.freecodecamp.org/curriculum/drum/Heater-6.mp3" },
    { key: "D", id: "Open-HH", name: "Open-HH", src: "https://cdn.freecodecamp.org/curriculum/drum/Dsc_Oh.mp3" },
    { key: "Z", id: "Kick-n-Hat", name: "Kick-n'-Hat", src: "https://cdn.freecodecamp.org/curriculum/drum/Kick_n_Hat.mp3" },
    { key: "X", id: "Kick", name: "Kick", src: "https://cdn.freecodecamp.org/curriculum/drum/RP4_KICK_1.mp3" },
    { key: "C", id: "Closed-HH", name: "Closed-HH", src: "https://cdn.freecodecamp.org/curriculum/drum/Cev_H2.mp3" },
  ];

  const padBank = document.getElementById("pad-bank");
  const display = document.getElementById("display");

  // Create drum pads dynamically in correct order
  drumPadsData.forEach(({key, id, name, src}) => {
    const pad = document.createElement("div");
    pad.classList.add("drum-pad");
    pad.id = id;
    pad.textContent = key;

    const audio = document.createElement("audio");
    audio.classList.add("clip");
    audio.id = key;
    audio.src = src;

    pad.appendChild(audio);
    padBank.appendChild(pad);

    // Play audio on click and update display
    pad.addEventListener("click", () => {
      audio.currentTime = 0;
      audio.play();
      display.textContent = name;
    });
  });

  // Play audio on key press
  window.addEventListener("keydown", (e) => {
  const key = e.key.toUpperCase();
  
  // Check if the key pressed is one of the valid drum keys
  if (!["Q","W","E","A","S","D","Z","X","C"].includes(key)) return;

  // Select audio element by id matching the pressed key
  const audio = document.getElementById(key);

  if (!audio) return;

  // Reset audio to start and play
  audio.currentTime = 0;
  audio.play();

  // Find the drum pad parent to get the clip name for display
  const parentPad = audio.parentElement;

  // Update the display text with the correct clip name
  const clip = drumPadsData.find(d => d.id === parentPad.id);
  if (clip) {
    display.textContent = clip.name;
  }
});

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/135.0.0.0 Safari/537.36

Challenge Information:

Front End Development Libraries Projects - Build a Drum Machine

2

Looks ok at first glance. Can you share your HTML as well?

3

Yep here’s the 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">

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

I believe you are supposed to create the drum pads manually (in the HTML file), rather than using JavaScript

5

Do you have a live codepen or something you can link to?

If I paste this code into codepen it’s blank and pressing the buttons has no effect.

Maybe something is wrong with my codepen though

6

For me it shows this

image
image940×532 5.69 KB

It also passes all the tests. No idea what could be wrong.

image
image940×532 19.5 KB

7

ah ok. thanks for that tip.

8

I think it was that the HTML didn’t include the pads. The test passed when I moved the keys over to HTML. Thanks for looking into this. Much appreciated!

1 Like