So far I have only been setting up React logic for my app and it seems to be working correctly at the moment. The display gets updated and correct audio gets played when I either click on a corresponding keyboard key and whenever I click it through manually clicking on a corresponding button with mouseclick.
However, for some reason it is not passing the tests 5-8 and I’m not sure why.
I modified my code to include <audio> inside the button element and got rid of the div for that component, it is still working same way, which seems to be correct but still not passing some tests (says 7/8 tests were passed but when I look into detailed description I see that both tests #6 and #7 are failed). I’m still confused why is it happening.
Basically the main change I applied to my code is in the Drumpad component:
In the first line I’m getting the audio element by its ID, then setting up it’s volume based on the volume stored in the state and then on the third line I’m checking whether audio element was paused, then play, if not I stop it and then play.
Basically I’ve set the last line to allow a user to click on the same button multiple time as on a regular drum machine. Before I did it with just audio.play() and the drum machine wouldn’t play a sound when I click multiple times in a row on the same pad. It would wait until the first sound finishes playing and only then play it again.
So basically if I set it up as just audio.play() instead of this ternary and pressed W key multiple times and audio file duration is, for example, 2 seconds, it would wait until the sound that is triggered by the first press is finished playing and would only allow me to trigger this sound again after 2 seconds.
With this ternary I press W key multiple times within those 2 seconds audio file duration it will pause the previously triggered sound and trigger it again with each new pressing on the key.
Currently, the issue is that the script is erroring out, and you can see this in the browser console: Uncaught (in promise) DOMException: The play() request was interrupted by a call to pause(). https://goo.gl/LdLk22
The link provided by Google is quite informative. I suggest you start there.