Drum Machine - Sounds all over the place

JavaScript
1

Hi!

It seems this project has made me a frequent visitor here :frowning:.

Summary of my code so far: onClick() event handler passes the id of the button to the input state. Then, switch statement is used to compare input state with different cases and play a corresponding sound.

However, something goes horribly wrong. The buttons play sounds, but not their corresponding sound, and sometimes multiple sounds at the same time.

There is also a commented out function which I used initially. It is basically an if-else statements to compare every button id with this.state.input, and playing the corresponding sound. It worked somewhat, but with a -1 click lag. For example, if I had pressed button “Q”, and proceeded to click button “W”, the first sound of W click would be of the Q and then it would somehow update it to be W. I am under the impression that switch statements are preferable over if-else statements, so there’s that.

I was thinking it might be a problem of asynchronous execution, but then again, I’m total amateur so I’m probably wrong.

Link:
https://codepen.io/snjegurotska/pen/ydejXj

Any help is much appreciated!

Thanks,

MJ

3

Thank you!

Funnily enough, the problem now is the same of the -1 click lag described in the first post.

Am I at least somewhat on the right track :sweat_smile:?

Thanks again,

MJ

5

Thanks! I will look into it!

MJ