The challenge today was to create a javascript drum machine that takes keyboard input and plays the correct sound and animations when certain keys are pressed.

This was a quick fun project where I got to play with the <audio> element and the HTMLMediaElement controls. I have not done much with HTML5 media up to this point and definitely learned some tricks for dealing with some audio quirks.

Once audio has started playing, you can't play that audio element again until it's finished playing. For a drum machine this was quite limiting. Resetting the current play time of the audio (audio.currentTime = 0;) ensured that each click or keypress resulted in the expected sound.

This challenge took me about 45 minutes to complete.

You can sign up for Javascript30 here:

You can view my Drum Machine here:

You can see my code here: