You do not need a DAW to sketch a beat. Beatline is an eight-voice step sequencer that runs entirely in your browser — the drum sounds are built from oscillators and noise, not samples, so the whole thing is a few kilobytes and never touches the network.
Placing a beat
The grid is eight voices down (kick, snare, hats, clap, tom, rim, cowbell) by sixteen steps across. Click a cell to place a hit; every fourth column is accented so you can feel the beat. A four-on-the-floor kick with a backbeat snare is four clicks:
- Kick on steps 1, 5, 9, 13
- Snare on steps 5 and 13
- Closed hat on every off-beat
Set the tempo, add a little swing to push the off-beats late, and it loops.
Why the timing stays tight
Naively, you might schedule each drum hit with a setTimeout. Do that and the beat drifts — timers fire late under load, and the error compounds. Beatline uses the look-ahead scheduler pattern instead: a coarse timer wakes up every 25 milliseconds, looks a little way into the future, and schedules the exact sample time of every hit in that window against the audio clock.
// The idea, simplified:
setInterval(() => {
const horizon = audioCtx.currentTime + 0.1; // 100ms ahead
while (nextHitTime < horizon) {
playVoice(voice, nextHitTime); // sample-accurate
nextHitTime += stepDuration;
}
}, 25);
The audio hardware, not the JavaScript timer, decides exactly when each hit sounds — so the groove is rock-steady even while the tab is busy.
Getting the loop out
When a pattern is worth keeping, export WAV renders one bar offline — faster than real time, straight from the same synthesized voices — into a correctly-formed RIFF/WAVE file you can drop into a track. The pattern itself saves to your browser and copies to a short share string, so you can paste a beat to a friend and they hear exactly what you built.
It is a real instrument that happens to live on a web page. Open it, place a few hits, and press play.