Drum Machine

How a Step Sequencer Works

A step sequencer divides a bar into equal slots. Each step is a 16th note at whatever tempo you set, and the playhead runs left to right, firing every step you've switched on as it passes. Each row is one drum sound; the pattern loops until you stop it, and that repetition is what turns a grid of squares into a groove.

On a 16-step grid you're looking at one bar of 4/4. Steps 1, 5, 9 and 13 are the downbeats, the quarter notes you'd count out loud. Steps 3, 7, 11 and 15 are the upbeats, the "and" of each count. Everything else falls on the 16th-note subdivisions between them. Learning to see the grid that way is most of the skill: you stop placing squares and start placing beats.

Player accounts can switch the grid to 32 steps, which gives you two bars instead of one: room for a fill, a variation, or a pattern that doesn't repeat every four counts.

The Eight Sounds

Every sound here is synthesised in the browser rather than loaded from a sample library, which is why the tool loads instantly and works offline.

• Kick: a sine wave sweeping sharply down in pitch, plus a short click for attack. The sweep is what your ear reads as weight.
• Snare: a pitched body tone underneath a burst of filtered noise. The noise is the "crack", the tone is the "thump".
• Closed hat: a very short band-passed noise burst. Short is the whole point: it defines the grid without filling space.
• Open hat: the same idea with a long decay, usually placed on an upbeat so it rings into the next downbeat.
• Clap: several noise bursts a few milliseconds apart, then a tail. That tiny stagger is what makes it a room full of hands rather than one.
• Rim: two short tones together, no noise. Cuts through a busy mix at low volume.
• Tom Hi: a pitched tone gliding down a few semitones, with no noise behind it. It carries a melody note's worth of weight, which is why toms fill space that a hat cannot.
• Tom Lo: the same shape pitched lower and left to ring longer. Two toms are the minimum for a fill that moves, since a fill is really a descent.

Player accounts get three more kits: 808 (long sub kick, metallic hats), Acoustic (softer attack, more body) and Lo-Fi (darker, filtered), which re-voice all eight sounds without changing your pattern.

Programming Your First Beat

1. Kick on 1 and 9. That's beats one and three, the spine of most 4/4 music.
2. Snare on 5 and 13. Beats two and four, the backbeat. Kick and snare alternating is already a groove.
3. Closed hats on every odd step (1, 3, 5, 7…) for straight eighths. Every step gives you sixteenths: busier, more urgent.
4. Press play and listen before adding anything else. Most beginner patterns fail from too much, not too little.
5. Now break it. Move the second kick to step 11 instead of 9. Add an open hat on 15. Small displacements are where feel comes from.

Swing and Volume

Swing delays every off-beat step by a percentage of a step. At 0% the grid is perfectly straight: machine-like, which is right for house and techno. Push it up and the offbeats fall late, which is the shuffle behind hip-hop, jazz and most funk. Even 15–20% is enough to stop a pattern sounding programmed; the classic MPC feel sits around 54–58% in that machine's own scale.

Each track has its own volume slider. Balance is what separates a beat that sounds finished from one that sounds like a grid: hats usually want to sit well below the kick and snare, and a clap layered under a snare should support it, not compete.

Templates and Saving

The six genre templates (Basic Rock, Hip-Hop, House, Drum & Bass, Funk, Bossa Nova) are starting points, not answers. Load one, play it, then change one thing at a time and listen to what each change does. That's a faster way to learn what defines a genre than reading about it.

Player accounts can save beats to their account, so a pattern follows you between devices rather than living in one browser. Saved beats keep their tempo, kit, swing, track volumes and grid length, so loading one restores the whole setup rather than just the squares.

Exporting: MIDI and WAV

Player accounts can take a pattern out of the browser two ways:

• MIDI writes the pattern as notes on GM percussion (channel 10), so it drops into any DAW and triggers whatever drum instrument you point it at. Use this when you want to keep editing.
• WAV renders the audio exactly as you hear it, as a seamless one-bar loop: the decay of the last hits wraps back to the start, so it repeats without a gap. Use this when you want the sound itself.

Both files are named after whatever is loaded (a saved beat or a template), so exporting several ideas doesn't leave you with a folder of identical filenames.

And if sequencing in a browser hooks you the way it hooked us, the next step is hardware: pads under your fingers, knobs on the filters. Our guide to the best drum machines for producers covers five machines worth starting on, with full reviews and videos.

Why the Timing Holds

A naive browser sequencer fires steps with setInterval, which drifts because JavaScript timers aren't guaranteed to run on time. This one schedules each hit on the Web Audio clock instead: a timer wakes roughly every 25 milliseconds and queues anything due in the next 100, handing exact start times to the audio hardware in advance. Playback is sample-accurate and stays that way over long sessions.

Frequently Asked Questions