Stuck on Drum Machine

Stuck on Drum Machine
0

#1

Here is a link to my codepen.

My current issue is how to make individual sounds play if I were to add another button. I achieved in getting one sound to play on my “Q” button. I was able to do this by applying getElementById in my onClick method. Then playing it from there.

How could the sound be dynamically changed by the onClick method.

I have been stuck on this for days.


#2

So as I understand you, you’re trying to figure out how to make a different sound play from a different button?
But your pen doesn’t have any other buttons right now…

I imagine you just need to repeat the code that worked for the first button for all the other buttons…

Edit: you may need to figure out how to pass a unique id to the click handler so it knows which audio to play…
for eg:

handleClick(e) {
    console.log('Clicked', e);
    let x = document.getElementById("kick");
    x.play();
  }

Try logging your event by changing your handleClick to the above. Your goal is to figure out which button was clicked…


#3

I forked your pen and logged the button click so you can view the target object is different based on where we click

(open the console log to see it happening as you click. Then all you have to do is trigger different audio for each one).

Edit:
and here is another pen showing the two buttons playing different sounds (another fork)


#4

Hey thank you for taking the time to answer my question. This is exactly what i was looking for.