Build a Drum Machine - Build a Drum Machine

JacoBEAR999 · April 11, 2025, 5:25pm

Tell us what’s happening:

My code doesn’t pass, but my code works. Whenever I try to fix it, test #9 stops passing.
Tests I haven’t passed:
Test #7
Test #8
Please help, I’ve tried almost everything.

Your code so far

<!-- file: index.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 class="drum-pad" id="Q">Q<audio class="clip" src="https://s3.amazonaws.com/freecodecamp/drums/Heater-1.mp3" id="Q"></audio></div>
        <div class="drum-pad" id="W">W<audio class="clip" src="https://s3.amazonaws.com/freecodecamp/drums/Heater-2.mp3" id="W"></audio></div>
        <div class="drum-pad" id="E">E<audio class="clip" src="https://s3.amazonaws.com/freecodecamp/drums/Heater-3.mp3" id="E"></audio></div>
        <div class="drum-pad" id="A">A<audio class="clip" src="https://s3.amazonaws.com/freecodecamp/drums/Heater-4_1.mp3" id="A"></audio></div>
        <div class="drum-pad" id="S">S<audio class="clip" src="https://s3.amazonaws.com/freecodecamp/drums/Heater-6.mp3" id="S"></audio></div>
        <div class="drum-pad" id="D">D<audio class="clip" src="https://s3.amazonaws.com/freecodecamp/drums/Open-HH.mp3" id="D"></audio></div>
        <div class="drum-pad" id="Z">Z<audio class="clip" src="https://s3.amazonaws.com/freecodecamp/drums/Kick_n_Hat.mp3" id="Z"></audio></div>
        <div class="drum-pad" id="X">X<audio class="clip" src="https://s3.amazonaws.com/freecodecamp/drums/RP4_KICK_1.mp3" id="X"></audio></div>
        <div class="drum-pad" id="C">C<audio class="clip" src="https://s3.amazonaws.com/freecodecamp/drums/Cev_H2.mp3" id="C"></audio></div>
      </div>
      <p id="display"></p>
    </div>
    <script src="script.js"></script>
  </body>
</html>

/* file: styles.css */
html {
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
  margin: 0; padding: 0;
}

body {
  background: hsl(270, 0%, 0%);
}

#drum-machine {
  display: grid;
  justify-items: center;
  grid-gap: 20px;
  padding: 30px;
  background: hsl(240, 38%, 10%);
  border-radius: 1rem;
  max-width: 96%;
  margin: 2rem auto;
}

#pad-bank {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.drum-pad {
  font-size: 1.4rem;
  font-weight: bold;
  width: 2.5em;
  height: 2.5em;
  background: radial-gradient(hsl(270, 10%, 20%), hsl(240, 38%, 10%) 80%, black);
  border-radius: 0.4rem;
  margin: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

#display {
  width: 400px;
  max-width: 90%;
  height: 3.6em;
  padding: 0.4rem;
  background: hsl(270, 10%, 20%);
  border-radius: 0.6rem;
  text-align: center;
  color: white;
}

/* file: script.js */
const audioClips = {
  Q: { text: 'Heater 1', src: 'https://s3.amazonaws.com/freecodecamp/drums/Heater-1.mp3' },
  W: { text: 'Heater 2', src: 'https://s3.amazonaws.com/freecodecamp/drums/Heater-2.mp3' },
  E: { text: 'Heater 3', src: 'https://s3.amazonaws.com/freecodecamp/drums/Heater-3.mp3' },
  A: { text: 'Heater 4', src: 'https://s3.amazonaws.com/freecodecamp/drums/Heater-4_1.mp3' },
  S: { text: 'Clap', src: 'https://s3.amazonaws.com/freecodecamp/drums/Heater-6.mp3' },
  D: { text: 'Open HH', src: 'https://s3.amazonaws.com/freecodecamp/drums/Open-HH.mp3' },
  Z: { text: 'Kick n Hat', src: 'https://s3.amazonaws.com/freecodecamp/drums/Kick_n_Hat.mp3' },
  X: { text: 'Kick', src: 'https://s3.amazonaws.com/freecodecamp/drums/RP4_KICK_1.mp3' },
  C: { text: 'Closed HH', src: 'https://s3.amazonaws.com/freecodecamp/drums/Cev_H2.mp3' }
};

const playSound = (key) => {
  const audio = new Audio(audioClips[key].src);
  audio.play();
  document.getElementById('display').innerText = audioClips[key].text;
};

document.querySelectorAll('.drum-pad').forEach(pad => {
  pad.addEventListener('click', () => {
    const key = pad.id;
    playSound(key);
  });
});

document.addEventListener('keydown', (e) => {
  const key = e.key.toUpperCase();
  if (audioClips[key]) {
    playSound(key);
  }
});

Your browser information:

User Agent is: Mozilla/5.0 (X11; CrOS x86_64 14541.0.0) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/126.0.0.0 Safari/537.36

Challenge Information:

Build a Drum Machine - Build a Drum Machine

robheyays · April 11, 2025, 5:59pm

I copied your code and ran this on code pen adding the testable projects link in the settings, HTML id’s all need to be unigue I hope this helps.

JacoBEAR999 · April 11, 2025, 6:11pm

If you’re talking about the HTML code, when I try, it either makes test #9 or test #6 stop passing.

robheyays · April 11, 2025, 6:28pm

It looks like there not using codepen so the info might not be accurate, are you aware that only D is not playing any sound?

JacoBEAR999 · April 11, 2025, 6:29pm

Yes, I noticed that. I thought that was just what it sounded like.

lasjorg · April 11, 2025, 7:28pm

You have to use the audio elements and call .play() on the elements. Not using the Audio constructor.
HTML ids should be unique.
Edit: You are not using the correct audio links. Use the https://cdn.freecodecamp.org/curriculum/drum/ CDN link.

JacoBEAR999 · April 11, 2025, 7:47pm

I tried, but it only made things worse.

Current JSS:

const audioClips = {
  Q: 'Heater 1',
  W: 'Heater 2',
  E: 'Heater 3',
  A: 'Heater 4',
  S: 'Clap',
  D: 'Open HH',
  Z: 'Kick n Hat',
  X: 'Kick',
  C: 'Closed HH'
};

const playSound = (key) => {
  const audio = document.getElementById(key);
  if (audio) {
    audio.currentTime = 0;
    audio.play().catch(error => console.error('Audio play failed:', error)); 
    document.getElementById('display').innerText = audioClips[key];
  }
};

document.querySelectorAll('.drum-pad').forEach(pad => {
  pad.addEventListener('click', () => {
    const key = pad.id;
    playSound(key);
  });
});

document.addEventListener('keydown', (e) => {
  const key = e.key.toUpperCase();
  if (audioClips[key]) { 
        playSound(key);
  }
});

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

lasjorg · April 11, 2025, 8:10pm

You still have duplicate ids, getElementById will give you the first one it finds and you can’t call play on a div element. Remove the ids from the divs and keep them on the audio elements, you can use firstElementChild in your forEach to pass the id of the child.

JacoBEAR999 · April 11, 2025, 9:53pm

I think I got it right, because test #9 and #6 passed again, but #7 and #8 didn’t.

Current JSS:

const audioClips = {
  Q: 'Heater 1',
  W: 'Heater 2',
  E: 'Heater 3',
  A: 'Heater 4',
  S: 'Clap',
  D: 'Open HH',
  Z: 'Kick n Hat',
  X: 'Kick',
  C: 'Closed HH'
};

const playSound = (key) => {
  const audio = document.getElementById(key);
  if (audio) {
    audio.currentTime = 0;
    audio.play().catch(error => console.error('Audio play failed:', error));    document.getElementById('display').innerText = audioClips[key];
  }
};

document.querySelectorAll('.drum-pad').forEach(pad => {
  pad.addEventListener('click', () => {
    const key = pad.firstElementChild.id;
    playSound(key);
  });
});

document.addEventListener('keydown', (e) => {
  const key = e.key.toUpperCase();
  if (audioClips[key]) {
    playSound(key);
  }
});

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

lasjorg · April 12, 2025, 5:18pm

Open-HH.mp3 doesn’t exist, look at the file names provided to you.

If I fix that, your code passes all the tests.

JacoBEAR999 · April 14, 2025, 5:40pm

Why is it that the simplest things always get me? Thank you for your help, @robheyays and @lasjorg!

Topic		Replies	Views
Build a Drum Machine - Build a Drum Machine Code Feedback	2	48	February 13, 2025
Front End Development Libraries Projects - Build a Drum Machine JavaScript	3	512	October 24, 2023
Build a drum machine JavaScript	2	237	September 9, 2024
Help with the Drum Machine needed JavaScript	4	328	August 31, 2021
Build a Drum Machine JavaScript	1	51	October 23, 2024

Build a Drum Machine - Build a Drum Machine

Tell us what’s happening:

Your code so far

Your browser information:

Challenge Information:

Related topics