A 16-step drum sequencer built with lookahead scheduling — the technique used in every professional web audio app to achieve rock-solid timing.
16-step sequencer
Click steps to toggle them. The white outline shows the current playhead position. Each row is a separate drum track.
120
Lookahead scheduling
The key insight: JavaScript timers are not precise enough to fire notes at the exact right moment — they can drift by tens of milliseconds. Instead, notes are scheduled slightly ahead of time against the audio hardware clock, which is sample-accurate.
The scheduler loop runs every 25 ms. Each tick it looks 100 ms ahead and schedules any notes that fall within that window. Because the audio engine processes in small chunks (typically 128 samples ≈ 3 ms), notes scheduled in advance fire with sub-millisecond accuracy — far tighter than any JavaScript timer.
Why not tie scheduling to the screen refresh? Screen updates fire at display rate (60 fps ≈ 16 ms) and can be throttled or skipped when the tab is in the background. A faster, independent loop keeps running even when the tab isn't visible, and the lookahead window absorbs any jitter.
Visual playhead runs on the screen refresh cycle, which is separate from the audio clock. Each frame it calculates which step is currently sounding by comparing elapsed time against the tempo, then highlights that column — a best estimate rather than a perfect sync.