TONE.JS · TRANSPORT · SEQUENCER · SYNTHS · YOTAM MANN, 2014
the pulse.
Web Audio measures in seconds. Tone.js measures in beats. Press play, click cells. The playhead is reading the grid sixteenth-note by sixteenth-note. The scheduler is keeping time so the synths don't have to.
what you're hearing.
Five drum tracks plus eight melody pitches, sixteen sixteenth-notes each — every cell on the page is the same kind of switch. The melody pitches are a two-octave A-minor pentatonic, which is to say any combination you fill in is consonant. Two bars of 4/4 at the BPM you pick. Tone.Transport is the global musical clock — it counts in beats and bars, not seconds, and every synth on this page is scheduled against it.
Each track is a different Tone synth. MembraneSynth for the kick (a frequency-pitched envelope, like a real kick drum). NoiseSynth for the snare (filtered noise burst). NoiseSynth piped through a high-pass Filter for the hi-hats (closed and open) — a real "tssk," not a metallic ring. A triangle Synth for the bass. And a polyphonic PolySynth wrapping a triangle Synth for the melody, so any combination of pitches on the same step rings as a chord. Each voice is a few lines of code; together they're a kit.
Tone.Sequence reads the grid every sixteenth-note and triggers the synths whose cell is on. It does not loop in JavaScript — Web Audio schedules events ahead of time, and Tone.Sequence keeps the queue full. That is why the rhythm doesn't drift even if your tab is slow.
Move the BPM slider. The transport changes tempo without restarting. Click a cell. The change takes effect on the next loop. This is the central insight: musical time is the API. You write what should happen and when in beats; Tone.js is responsible for "when" in seconds.
lineage.
- 1985MIDI standardized. The first universal "musical time" wire format. Notes-as-events instead of audio-as-samples.
- 1996Max/MSP ships commercially (Cycling '74). Patcher-style audio programming. Generations of academic and electronic-music sequencers descend from it.
- 2003SuperCollider 3. Audio-rate synthesis with a sequencing language. Industry-grade research and live-coding tool.
- 2011Web Audio API standardized. The browser gets a real audio graph for the first time. Low-level: nodes, buffers, sample-accurate scheduling — but no musical vocabulary.
- 2014Tone.js · Yotam Mann. A musical layer on top of Web Audio. Transport, BPM, sequences, synth presets, effects chains. Beats, not milliseconds.
- nowDefault for browser instruments. Ships in interactive editorial pieces (NYT, Pudding), Ableton Note's web companion, Strudel-adjacent live coding tools, web-based sequencers, and almost every student-built browser synth since 2017.
when to reach for it.
Reach for Tone.js when the work needs musical time — sequencers, browser instruments, generative compositions, scroll-driven music, interactive scores, prototype DAWs, anything that reasons in beats and bars instead of milliseconds.
Reach elsewhere when you need raw DSP performance (raw AudioWorklet), spatial 3D audio (Web Audio + PannerNode), real-time pitch detection (Pitchy or Meyda + Web Audio), or anything where the abstraction overhead matters more than the developer ergonomics.
Stack neighbors: Web Audio API (the layer beneath), Tonal.js (music theory utilities — chords, scales, intervals), Strudel (live-coded patterns, TidalCycles in JS), Howler (audio sprites for games), Faust (DSP DSL compiling to AudioWorklet).
the etudes have a method book.
Complete Technique — fifty-five progressive guitar exercises across five disciplines, with the music theory behind what your hands are doing. Pentatonic etudes in §IV map directly onto the melody grid above: same scales, same shapes, same harmonic logic. By Matthew Scott.
Open the method book →