Build a Drum Machine - Build a Drum Machine

JavaScript
1

Tell us what’s happening:

Hello,
I’ve tried several solutions but I can’t get pass controls 8 & 9, even though my dorm machine seems to be working just fine .
Could anybody help me figure this out ?
Thx

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

/* file: script.js */
const padBank = document.getElementById("pad-bank")
const drumPads = document.querySelectorAll(".drum-pad");
const display = document.getElementById("display");


 const playDrum = (id) => {
    const audioElement = document.getElementById(id)
    display.innerText = (audioElement.parentElement.id)
    audioElement.play();
 }

drumPads.forEach((drum) => {
    drum.addEventListener("click",()=>{
        playDrum(drum.innerText);
    })
})
 
addEventListener("keypress", (event) =>{
    playDrum(event.key.toUpperCase())
});

/* Old version of the event listener step 6
padBank.addEventListener("click", (event) => {
    playDrum(event.target.innerText);
});
*/

/* file: styles.css */
*{
  box-sizing : border_box;
}

#drum-machine{
  background-color : #C3110C;
  width : 80vw;
  height : 120vw;
  border-radius : 15px;
  margin : auto;
  padding-top : 1vh;
  
}


#pad-bank{
  padding : 10px;
  border-radius: 10%;
  margin : 15px auto;
  width : 65vw;
  height : 65vw;
  display: grid;
  grid-template-columns : 1fr 1fr 1fr;
  grid-template-rows : 1fr 1fr 1fr ;
background: #740A03;


}

.drum-pad{
  background : #280905;
  border-radius: 15%;
  color: #E6501B;
  text-align: center;
  align-content: center;
  font-size: 1.5rem;
}

#display{
  background : #280905; 
  color: #E6501B;
  margin: 30px auto ;
  border-radius: 3px;
  text-align: center;
  width : 45vw;
  height : 20px;
  padding: 5px;
}

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/18.6 Safari/605.1.15

Challenge Information:

Build a Drum Machine - Build a Drum Machine

2

Here are some debugging steps you can follow. Focus on one test at a time:

  1. Are there any errors or messages in the console?
  2. What is the requirement of the failing test?
  3. Check the related User Story and ensure it’s followed precisely.
  4. What line of code implements this?
  5. What is the result of the code and does it match the requirement? (Write the value of a variable to the console at that point in the code if needed.)

If this does not help you solve the problem, please reply with answers to these questions.

3

I’ve tried to follow the giving steps

  1. No errors or message un the console
  2. Requirements :
    1. Requirement N°8. When you click on a .drum-pad element, the audio clip contained in its child audio element should be triggered .
    2. Requirement N°9. 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.
  3. Related User story : Done.
  4. Line of code : funtion playDrum() .
  5. Result of the code is matching using audioElement.play();

I’ve tried several solution coming from different possibilities to trigger audio elements none is working .

4

What is the requirement of the failing test?

5

I’ve tried to follow the giving steps

  1. No errors or message un the console

  2. Requirements :

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

    2. Requirement N°9. 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.

  3. Related User story : Done.

  4. Line of code : funtion playDrum() .

  5. Result of the code is matching using audioElement.play();

I’ve tried several solution coming from different possibilities to trigger audio elements none is working .

6

Just focus on one test at a time. You cannot debug two errors simultaneously.

7

I’ve tried but I think the to errors have the same origin, inside de playDrum function

except if the error is coming from the two event listener witch I’ve tried to modify several times

8

Try not to add anything that isn’t in the instructions. The User Stories ask for a specific set of elements and the tests are designed specifically for that.

The instructions never ask for for a “group” div.

To debug this I simply went through each User Story and checked if it was implemented correctly.

9

Well I’ve checked I don’t see any “group” div and I’m following the user story by the letter.

10

Apologies, I hadn’t copied your code over correctly. Having another look.

11

I noticed there is a large delay if I click a pad multiple times quickly, or click it with the mouse.

Every time I trigger the pad the sound should play immediately from the beginning. It should interrupt any currently playing sound.

As it is, it’s impossible to play a beat.

12

it seems that this code is less lagging


let audio = new Audio();

const playDrum = (id) => {

const audioElement = document.getElementById(id)


audio.src = audioElement.src;

display.innerText = (audioElement.parentElement.id)

audio.currentTime = 0;

audio.play();


};

but it still not passing the tests

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

Your original code:

    audioElement.play();

Why did you create a new Audio object?

14

In your original code, try calling addEventListener() on the document object and changing the event from keypress to keydown.

15

it lower the lag you where mentioning

16

done it is still not passing the test

17

That change should work if you haven’t changed any other code from your original post.

18

It’s not “lag” that’s the problem exactly. It’s that the audio clip was not playing from the beginning when it was triggered.

19

i’ve set the audio.currentTime =0 to correct that

20

sorry but it’s still not passing the tests