is there a reason why the keydown function is inactive until after an initial button/mouse click?
The keyboard focus has to be somewhere on your drum machine page so that you can catch the keydown events. If you are looking at this through split pane in codepen then when you load the page I’m guessing the focus is on one of the codepen panes initially. So you have to click somewhere on your drum machine pane to get the focus on it.
FYI, using Firefox, if I right click on your drum machine in codepen and select This frame → Open frame in new window, then the new window will only have your drum machine and the keyboard focus will automatically be on it and I can use the keyboard without having to click the mouse.
okay. so theres no way to set it automatically for the user?
The keyboard focus will automatically be set on your drum machine if you open it in a window all by itself. But if you are looking at it through codepen then it isn’t in a window all by itself, it’s in a frame in codepen and one of the other codepen frames gets the keyboard focus instead because that’s the way codepen wants it.
So there is nothing you need to do here. This isn’t a problem with your drum machine. This is just a result of running it through codepen.