Front End Libraries Drum Machine Issue

1

Hi all,

So I’m having trouble getting my hotkeys to work for my drum machine project. I’ve tried using react-hotkeys keymaps and handlers to wrap my DrumButton components and even the audio elements within them, but no luck. What I’ve shared now is an attempt to get my .drum-pad components to listen for a keyDown event that matches the associated hotkey and then play the audio element within. I’d greatly appreciate any pointers anyone can give me to fix this!

2

I would add keydown event listener to the App and would move handlePlay function from DrumButton to App.
Something like this: https://codesandbox.io/s/upbeat-roentgen-b28wt

Also don’t link to the files on your computer that are outside of version control.

3

Thank you, that was just what I needed- everything works and your example was very helpful in learning how to fix it!