The sound doesn’t seem to be working for me. I’ve got the volume cranked up to 100%. I know my sound is working because I just tested my own drum machine and it is working fine. I’m also seeing this error over and over again in the console:
“Uncaught (in promise) DOMException: The media resource indicated by the src attribute or assigned media provider object was not suitable.”
It appears to be coming from line 11 in playSound.js.
This looks very nice, much more appealing than mine (http://bbdrummachine.surge.sh/). But I think you should reconsider your decision about requiring a minimum width. The majority of people out there are surfing the web with phones. I understand why you did this but there are ways you can narrow the sequencer controls (see mine).
outline: 0 set for all buttons which removes the keyboard focus indicator and makes it almost impossible for a keyboard user to use your drum machine. Always keep the keyboard focus indicator intact but definitely customize it so it fits your style.
Speaking of keyboard users, there is no way for them to start the sequencer because the start button is not actually a
<button>. Putting a click handler on a div is not enough to make it keyboard accessible. Use a
<button> like you did for the sound bank controls. Same goes for the trash cans.
There are some major accessibility issues for people using screen readers but I won’t go into those now. You can message me directly if you are interested.
But don’t get me wrong, I do like this a lot. Accessibility is my area of interest and so I always am always pointing out those issues. But this looks really cool and I can’t wait to hear it once the sound issue is fixed.