Build a beat maker app: a 16-step drum machine with sounds made in the browser
A step sequencer is one of the most satisfying things a browser can do: a grid of pads, a playhead sweeping across, and a beat that changes the moment you tap. Anticode can build a beat maker app with drums synthesised in code using the browser's audio, because its sandbox can't load sample files from anywhere. The sounds are electronic by nature, closer to classic drum machines than to recorded kits.
How a step sequencer works
A bar of 4/4 is divided into 16 steps, each a sixteenth note. Each row of the grid is an instrument; a lit pad means that instrument plays on that step. At 120 beats per minute, each step lasts 125 milliseconds, and the playhead loops the bar. That's the entire model, which is why sequencers are easy to start and hard to put down.
Useful additions, roughly in order of value:
- Tempo from about 60 to 180 BPM, with tap tempo.
- Velocity or accent per step, so the same hi-hat can be loud or soft.
- Swing, which delays every second sixteenth slightly. A little swing is what turns a robotic pattern into a groove.
- Pattern length of 8, 16 or 32 steps, and several patterns you can chain into a song.
- Mute and solo per row, and a volume per instrument.
Drums without samples
Anticode's apps can't load audio files, so each drum is built from oscillators, noise and envelopes with the browser's Web Audio API. This is how the classic analogue drum machines made their sounds too, so the results can be genuinely good:
| Drum | Recipe |
|---|---|
| Kick | A sine wave whose pitch drops fast from about 150 Hz to 50 Hz, with a short volume envelope |
| Snare | A short burst of filtered noise plus a quick tone around 180 to 250 Hz |
| Closed hi-hat | High-passed noise or a cluster of square waves, a very short envelope |
| Open hi-hat | The same with a longer tail, cut off when a closed hat plays |
| Clap | Three or four noise bursts a few milliseconds apart, then a tail |
| Tom and cowbell | Pitched tones with their own envelopes |
Ask for a few knobs per instrument (pitch, decay, tone) so you can shape the kit, and for two or three kit presets with different characters.
Timing that doesn't wobble
The common mistake is triggering sounds from a JavaScript timer, which drifts by tens of milliseconds when the page is busy. Audible wobble follows. The reliable approach schedules notes slightly ahead on the audio clock, which is sample-accurate, using a short look-ahead loop. Ask for exactly this, then test by playing a pattern while scrolling the page and switching tabs.
Browsers only start audio after a tap or click, so the app opens with a Play button. Some phones mute web audio when the silent switch is on; check before a demo.
Describing it to Anticode
"A beat maker app in the style of a hardware drum machine. Eight rows: kick, snare, clap, closed hat, open hat, low tom, high tom, cowbell, all synthesised with Web Audio. A 16-step grid with accents, swing, tempo 60-180 with tap tempo. Pitch, decay and volume per row, mute and solo. Eight pattern slots and a simple song chain. Schedule notes on the audio clock with look-ahead. Save patterns in the browser. Dark panel, lit pads in one colour, big Play button, keyboard: space to play."
Anticode's model writes it as one program. Exporting audio is the part to test: a WAV file can be rendered in the browser and downloaded, so ask for it and check the file plays in another app.
Limits
- No sample packs or your own recordings. Audio files can't load from elsewhere, and there's no microphone access to record.
- No MIDI from the app's side, and no syncing tempo with other software or devices; treat it as a standalone instrument.
- No sharing beats with friends inside the app. Patterns stay on your device; export a file or a short pattern code to share.
- No collaborative jams. Several people playing the same pattern from different devices needs a server.
- Not a DAW. For mixing, recording vocals and full arrangements, use a music production app.
For practising with a click rather than making beats, see the metronome app. Music teachers might also look at the ear training app; musicians promoting their work will want a musician website.
Questions people ask
Can the beat maker app use real drum samples?
No. The sandbox can't load audio files, so drums are synthesised in code. Ask for several kit presets to vary the character.
Does it work on a phone?
Yes, with a grid sized for fingers. Audio starts after you tap Play, and some phones mute it in silent mode.
Can I export my beat?
Ask for WAV export rendered in the browser, and test that the download plays on your device.