Drum machine React-Redux


Finally finished my drum machine. This was a most diffucult project so far, but somehow managed to finish it.
Any feedback is greatly appreciated.

Congrats, @ededals! I’m enjoying the analog feel of the power button slide-- almost a tube warming up feeling.

This works well onClick, but perhaps it would be more intuitive to have the letters Q, W, E, etc. trigger samples like buttons on an MPC. Perhaps consider onKeyPress to trigger?

Hi @abgales,

Thank you very much for the feedback :slight_smile:
I was trying to solve it with onKeyPress trigger on each button, but then I realised I do not know how to focus the specific button. So I decided to take easy way and create event handler on document but this approach feels kind of clumsy to me. Do you have any ideas how to solve the focus problem, so I could acess the specific button on key press?

@ededals, of course! I think I see what’s happening more clearly now. The event listener is indeed firing, but it is not triggering the sample to play.

The event itself looks like this when it arrives at keyPressHandler:

keydown { target: body, key: "s", charCode: 0, keyCode: 83 }

But right now it’s passed to filterPressedButton, returning Undefined. Further, the block following this attempts to trigger the audio with a more traditional JS click event:


I wonder if instead of creating buttons with audio elements and attempting to click them, you instead create a single function that handles playing the audio. This could handle requests from button clicks as well as keystrokes. The function could accept the event &/or key. This could trigger the appropriate sound and volume by referencing the volume & drum kit state.


Thank you for the idea. I guess from software design point of view it makes more sense to manage all in one place. I will try to make the changes and see how it goes.