Build a Drum Machine - Build a Drum Machine

JavaScript
1

Tell us what’s happening:

When you click on a .drum-pad element, the audio clip contained in its child audio element should be triggered.

this test num 8 is failing not sure why its working for me / so how to trick that test ?

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'>
        <button class='drum-pad'>Q</button>
        <button class='drum-pad'>W</button>
        <button class='drum-pad'>E</button>

        <button class='drum-pad'>A</button>
        <button class='drum-pad'>S</button>
        <button class='drum-pad'>D</button>

        <button class='drum-pad'>Z</button>
        <button class='drum-pad'>X</button>
        <button class='drum-pad'>C</button>
      </div>
      <p id='display'></p>
  </div>
  </body>
  <script>    
const Q_audio_smooth = 'https://s3.amazonaws.com/freecodecamp/drums/Chord_1.mp3'
const W_audio_smooth = 'https://s3.amazonaws.com/freecodecamp/drums/Chord_2.mp3'
const E_audio_smooth = 'https://s3.amazonaws.com/freecodecamp/drums/Chord_3.mp3'
const A_audio_smooth = 'https://s3.amazonaws.com/freecodecamp/drums/Give_us_a_light.mp3'
const S_audio_smooth = 'https://s3.amazonaws.com/freecodecamp/drums/Dry_Ohh.mp3'
const D_audio_smooth = 'https://s3.amazonaws.com/freecodecamp/drums/Bld_H1.mp3'
const Z_audio_smooth = 'https://s3.amazonaws.com/freecodecamp/drums/punchy_kick_1.mp3'
const X_audio_smooth = 'https://s3.amazonaws.com/freecodecamp/drums/side_stick_1.mp3'
const C_audio_smooth = 'https://s3.amazonaws.com/freecodecamp/drums/Brk_Snr.mp3'

const Q_audio_heater = 'https://s3.amazonaws.com/freecodecamp/drums/Heater-1.mp3'
const W_audio_heater = 'https://s3.amazonaws.com/freecodecamp/drums/Heater-2.mp3'
const E_audio_heater = 'https://s3.amazonaws.com/freecodecamp/drums/Heater-3.mp3'
const A_audio_heater = 'https://s3.amazonaws.com/freecodecamp/drums/Heater-4_1.mp3'

const S_audio_heater = 'https://s3.amazonaws.com/freecodecamp/drums/Heater-6.mp3'
const D_audio_heater = 'https://s3.amazonaws.com/freecodecamp/drums/Dsc_Oh.mp3'
const Z_audio_heater = 'https://s3.amazonaws.com/freecodecamp/drums/Kick_n_Hat.mp3'
const X_audio_heater = 'https://s3.amazonaws.com/freecodecamp/drums/RP4_KICK_1.mp3'
const C_audio_heater = 'https://s3.amazonaws.com/freecodecamp/drums/Cev_H2.mp3'

const smooth = {
  Q: Q_audio_smooth,
  W: W_audio_smooth,
  E: E_audio_smooth,
  A: A_audio_smooth,
  S: S_audio_smooth,
  D: D_audio_smooth,
  Z: Z_audio_smooth,
  X: X_audio_smooth,
  C: C_audio_smooth
};
const heater = {
  Q: Q_audio_heater,
  W: W_audio_heater,
  E: E_audio_heater,
  A: A_audio_heater,
  S: S_audio_heater,
  D: D_audio_heater,
  Z: Z_audio_heater,
  X: X_audio_heater,
  C: C_audio_heater
}

    let pad = document.getElementById('pad-bank')
    for (let child of pad.children) 
    { 
      child.insertAdjacentHTML( 
        'beforeend', `<audio src="${smooth[child.innerText.trim()]}" class="clip" id="${child.innerText.trim()}"></audio>` ); 
    }

  function playMusic(event) {   
    const button = event.currentTarget;  
    audio = button.querySelector('audio'); 
    if (audio)
    { 
      audio.currentTime = 0; 
      audio.play(); 
    } 
  }

  let drum = document.querySelectorAll('.drum-pad')
  drum.forEach(d=>d.addEventListener('click',playMusic))

  </script>

</html>


/* file: script.js */


/* 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/144.0.0.0 Safari/537.36

Challenge Information:

Build a Drum Machine - Build a Drum Machine

2

Welcome to the forum @kostiadid !

When I click on a drum pad, I see this console error:

image

Aren’t you seeing that?

Also, why have you included all of your JavaScript inside the index.html file when you have a script.js file you can use?

3

okey I think I fixed it thanks / yes will include in to js file thanks ! Not sure how to close second topic // just solved it ahahahh Im so dump

1 Like
4

Please do not create duplicate topics for the same challenge/project question(s). If you need more help then respond back to the original topic you created with your follow up questions and/or your updated code and question.
This duplicate topic has been unlisted.

Thank you.

5

This topic was automatically closed 28 days after the last reply. New replies are no longer allowed.