Drum Machine

beats per minute

Stored Patterns

What is this? (show)

This is a drum machine that runs in a web browser. Basically, you create a pattern in the main grid and the browser will play it repeatedly in a loop. Changes to the grid update the pattern as it plays, with a short delay. I didn't have a lot of time to add features, so I added the ones I wanted most in a drum machine: the ability to do odd meters like 5/4 and 7/4 the ability to combine sixteenth notes and sextuplets in the same pattern.

Future Work

Someday I may reprogram this to use Web Audio API. A long time ago when I was writing this app, I didn't use Web Audio API because it wasn't offically HTML5 yet and Caniuse said it wasn't supported by IE9 and iOS Safari. Javascript's task scheduling mechanism (understandably) doesn't provide the exactness you'd want for sequencing music, but Web Audio API does.

Credits

I acquired all the drum sounds from drumsamples.org, which has a very nice library of drum sounds, all in the same 16-bit mono 44.1 kHz WAV format, all synched to the start of their files such that incorporating them in this drum machine was as easy as could be. Thanks, Zuzz, whoever you are!

This page was my reference for the WAV sound format.

Pedro Adaria's riffwave.js was helpful to me when I was learning how to convert arrays of numbers to base64 and vice versa. I did borrow 11 lines of his code, which is duly marked in my source code.