Drum Machine Audio issues

skilledthunder · May 5, 2019, 12:06am

Can someone please help me understand or point me in the right direction this issue? For some reason I can’t get the audio to play when I click on each element. I think my issue is with the audio and play functions but I’m not sure.

Here’s a link to my code so far: https://codepen.io/skilledthunder/pen/pBmPZa?editors=0010

Sorry if my code looks messy, I’m still pretty new to React. Any help would be much appreciated.

metasean · May 5, 2019, 5:07am

So there’s a simple fix to “pass the test”. For that see https://reactjs.org/docs/events.html#keyboard-events

Unfortunately, I haven’t been able to get your example to actually make a sound when a key is pressed, and I’ve hit the end of my day But, before I crawl into bed, I did want to share some of what I learned (I’m a Vue dev, not React dev, so some of this may be obvious to you, but it wasn’t to me).

You can’t use a keyboard event on a vanilla div.
- https://stackoverflow.com/a/30677147/4285306
There are supposedly several ways to make a vanilla div work with keyboard events
- https://stackoverflow.com/q/22123055/4285306
You can’t just log out the event data that’s passed by the keyboard event, but there are a couple of ways to work around this
- https://stackoverflow.com/a/22124035/4285306
- https://stackoverflow.com/questions/22123055/react-keyboard-event-handlers-all-null#comment57185185_22123055

And with that I must say: