Build a Drum Machine - Build a Drum Machine

Curriculum Help
1

Tell us what’s happening:

Hi folks,

I am having trouble with passing test 9 on my drum machine

My key presses indeed play the appropriate sound and update the display correctly.

I can’t figure out what I am missing here. From what I understand the keydown EventListener is playing the audio file directly from the HTML

Your code so far

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


const drumMachine = document.getElementById('drum-machine');
const padBank = document.getElementById('pad-bank');
const drumPads = document.querySelectorAll('.drum-pad');
const displayEl = document.getElementById('display');
const audio = new Audio();


drumPads.forEach((btn) => {
  btn.addEventListener('click', (e) => {
  const clip = e.currentTarget.querySelector('.clip');
  clip.currentTime = 0;
  clip.play();
  const padName = e.currentTarget.id
  displayPad(padName)
 
  })
})

window.addEventListener('keydown', (e) => {
  const key = e.key.toUpperCase();
  const clip = document.getElementById(key);
  if (!clip) return;
  clip.currentTime = 0;
  clip.play();
  const padName = clip.parentElement.id
  displayPad(padName)
});


const displayPad = (padName) => {
  displayEl.innerText = padName
};


/* Page reset */
* {
  box-sizing: border-box;
  font-family: Arial, sans-serif;
}

body {
  background: black;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}


#drum-machine {
  background: black;
  padding: 25px;
  border-radius: 15px;
  width: 320px;
  border: 1px solid #00e6ff;
}


#pad-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}


.drum-pad {
  background: black;
  border: 1px solid #00e6ff;
  border-radius: 10px;
  height: 75px;
  width: 75px;
  font-size: 1.6rem;
  font-weight: bold;
  color: #00e6ff;
  cursor: pointer;
  transition: all 0.15s ease;
}


.drum-pad:hover {
  background: black;
  box-shadow: 0 0 15px #00e6ff;
}

#display {
  margin-top: 18px;
  padding: 12px;
  background: black;
  border-radius: 8px;
  text-align: center;
  font-size: 1rem;
  letter-spacing: 2px;
  min-height: 1.5em;
  color: #00ffcc;
  border: 1px solid #00e6ff;
  box-shadow: inset 0 0 200px rgba(0, 255, 200, 0.4);
}

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:151.0) Gecko/20100101 Firefox/151.0

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

Nevermind I found this post Here which has the exact same problem as me

3

Hi @Grinner28,

Try calling the listener on the document object rather than the window object.

Happy coding