Front End Development Libraries Projects - Build a Drum Machine

JavaScript
1

Tell us what’s happening:
Hi,
The problem I have is that my drum-machine plays only one sound on every bank and I’m struggling to figure out why.

Your code so far

Your browser information:

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

Challenge: Front End Development Libraries Projects - Build a Drum Machine

Link to the challenge:

2

You’ve created one audioRef but yet you are assigning it to every button. I’m guessing that is causing your problem.

You actually have access to the event details in the handler function you define. It will automatically be passed in as the first argument to the handler function. You can access it by adding the parameter to your function definition:

const playSound = (event) => {
    console.log(event.target);
    if (power) {
      audioRef.current.volume = volume;
      audioRef.current.play();
      setDisplayText(name.replace(/[-]/g, " "))
    }
};

Take a look at what is being logged to the console each time you click a button. Hopefully that will get you started on how to solve this issue.

3

The docs also have some more info and options you can look at.

4

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