Stuck on Drum Machine

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.

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…

1 Like

I forked your pen and logged the button click so you can view the target object is different based on where we click
https://codepen.io/hbar1st/pen/QBRVWG

(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)

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

1 Like