Build a Drum Machine - Build a Drum Machine

JavaScript
1

Tell us what’s happening:

the test passed but it doesnt work why is that…?

Your code so far

<!-- file: index.html -->
<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Drum Machine</title>
    <link href='styles.css' rel='stylesheet'>
  </head>
  <body>
    <div id="drum-machine">
<div id='pad-bank'>

  <button class="drum-pad" id="">Q
    <audio class="clip" src="https://cdn.freecodecamp.org/curriculum/drum/Heater-1.mp3" id="Q"></audio>
  </button>
  <button class="drum-pad" id="">W
    <audio class="clip" src="https://cdn.freecodecamp.org/curriculum/drum/Heater-2.mp3" id="W"></audio>
  </button>
  <button class="drum-pad" id="">E
    <audio class="clip" src="https://cdn.freecodecamp.org/curriculum/drum/Heater-3.mp3" id="E"></audio>
  </button>
  <button class="drum-pad" id="">A
<audio class="clip" src="https://cdn.freecodecamp.org/curriculum/drum/Heater-4_1.mp3" id="A"></audio>
  </button>
  <button class="drum-pad" id="">S
    <audio class="clip" src="https://cdn.freecodecamp.org/curriculum/drum/Heater-6.mp3" id="S"></audio>
  </button>
  <button class="drum-pad" id="">D
    <audio class="clip" src="https://cdn.freecodecamp.org/curriculum/drum/Dsc_Oh.mp3" id="D"></audio>
  </button>
  <button class="drum-pad" id="">Z
    <audio class="clip" src="https://cdn.freecodecamp.org/curriculum/drum/Kick_n_Hat.mp3" id="Z"></audio>
  </button>
  <button class="drum-pad" id="">X
    <audio class="clip" src="https://cdn.freecodecamp.org/curriculum/drum/RP4_KICK_1.mp3" id="X"></audio>
  </button>
  <button class="drum-pad" id="">C
    <audio class="clip" src="https://cdn.freecodecamp.org/curriculum/drum/Cev_H2.mp3" id="C"></audio>
  </button>
</div>
<p id="display">

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

/* file: styles.css */
*,::before,::after{
  margin:0;
  box-sizing:border-box;
}
.drum-pad{
font-size:x-large;
margin:4px;
}
.drum-pad:hover{
  background-color:white;
}

/* file: script.js */
const drumPad=document.querySelectorAll('.drum-pad')
const display=document.getElementById('display')

function playAudio(){
  const audio=document.querySelectorAll('.clip')
  audio.forEach((sound)=>{
    sound.currentTime=0
    sound.play()
  })
  
}

drumPad.forEach(pad=>{pad.addEventListener('click',()=>{
  playAudio()
  
  display.innerHTML=`${pad.textContent}`
})})
document.addEventListener('keydown', (event) => {
  const key = event.key.toUpperCase(); //.key is a method, Convert to uppercase to match audio IDs
  const audio = document.getElementById(key);
  
  if(audio){
    audio.currentTime=0
    audio.play()
  }
})

Your browser information:

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

Challenge Information:

Build a Drum Machine - Build a Drum Machinehttps://www.freecodecamp.org/learn/full-stack-developer/lab-drum-machine/build-drum-machine
2

onclick it plays one sound for all button but on key press it plays different sounds

3

Can you explain how this works? Why doesn’t a click and a keypress call the same code, if it’s to do the same thing?

Is a drum pad supposed to play multiple sounds?

I guess the test might just test if the audio is playing when you click the pad. Technically it is…

4

aouch thanks i didn’t notice

1 Like