React Perfromance lagging in Drum Machine

JavaScript
1

Tell us what’s happening:
I have created the Drum Machine. It’s definitely not perfect and not as beautiful as the sample solution but it passes the FCC-tests.
One thing that came to my attention though is that my solution has some kind of a ‘lagging’. What I mean by that is that if I hit a button very quickly repeatedly, I can see the button flashing at the speed of my hitting the button but the sound is dragging behind a little bit. It seems like it waits until the sound -sample is played to the end and only then starts it again.
In total, this results in a not so responsive overall behavior.
Looking at how the sample solution is behaving, it’s totally different. The sounds seem to be interrupted which makes it appear much snappier.
I hope I was able to explain what I mean.
If you want to reproduce, you may want to go to my Drum Machine and hit the ‘Q’ button repeatedly and very quickly and then do the same thing for the sample solution Drum Machine.

Any hints what I’m doing wrong or what to improve would be highly appreciated.

Your code so far
My Drum Machine on Codepen

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_2) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/81.0.4044.138 Safari/537.36.

Challenge: Build a Drum Machine

Link to the challenge:

2

Try setting the currentTime to zero before the play call.

    this.audioElement.currentTime = 0;
    this.audioElement.play();
2 Likes
3

That was it! Now, my Drum Machine is as snappy and responsive as the one from the sample solution. Thank you very, very much!!!