2 min read

Make a drum loop in the browser and export it as a WAV

Eight synthesized voices, sixteen steps, and a look-ahead scheduler that keeps the timing tight — then render the loop to a real WAV, all client-side.

audioweb-audiomusicapps

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:

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.

Try it

More writing