🥁 DRUM PATTERN PLAYER

Sketch a beat in your browser.

16-step grid, four tracks (kick · snare · hihat · open hat). Click a step to add a loud hit, click again for a soft ghost note, third click clears it. Hit play, change BPM. Optional chord progression overlay layers I-V-vi-IV, ii-V-I, blues etc. on top — drums and chords lock to one BPM. Web Audio synthesizes everything — no upload, nothing leaves your device.

BPM

VOL

Kit:

Presets:

Chords:

Bass:

Swing:

Bars:

How it works. Every drum hit is synthesized on the fly — no samples loaded over the network. Kick is a sine wave with a fast pitch envelope (60Hz → 30Hz over ~50ms). Snare is a noise burst plus a low tonal layer. Hi-hats are filtered white noise with very short envelopes (open hat = same noise, longer release). Each hit is scheduled on the audio thread via the Web Audio look-ahead pattern — same one the metronome uses — so timing stays sample-accurate even when the JS thread is busy. Pick a chord progression and the same scheduler queues 3-4 stacked triangle-wave oscillators (the piano-roll chord stack) at half-bar boundaries, with per-note gain low enough that 4-note chord stacks sit cleanly under the drums.