Sounds: Four tar / doumbek layers — D (Doum, dominant accented), S (Soc, secondary dominant accent), t (tek, dominant unaccented), k (ka, non-dominant). Use - or ~ for rests. Grace notes are written with a g prefix (gk, gt, etc.) and appear as small blue cells — they fire slightly before their step to create a flam. A gg prefix (ggk, ggt) fires the note twice in quick succession before the step, producing a drag.
Playback: Click Play to start and Stop to stop. The active step lights up amber on each layer as it plays. Pattern inputs are hidden during playback and reappear on Stop.
Tempo: The slider sets BPM (1–1000). Changes apply live. Use the Tempo Changes panel to bounce the tempo automatically between a From and To value — it steps 1 BPM per pattern cycle and reverses at each boundary. "Every X cycles" slows the step rate. Click Cancel Ramp to lock the current tempo.
Rudiments: Select any of the 40 PAS rudiments from the dropdown (grouped by Rolls, Diddles, Flams, Drags), then press Load. The patterns, tempo, and grid are set automatically. Triplet rudiments are marked ♩3. When a rudiment uses the Soc layer, a badge on that row explains its role.
Rhythms: Select a rhythm from the dropdown in the Rhythms panel — the first variation is pre-selected automatically. Change the variation if desired, then press Load to apply the patterns and tempo.
Beat bar: The Beat: row above the pattern rows shows the current beat position as the pattern plays. Beat numbers are highlighted in amber; subdivision ticks between beats are dimmed. The bar updates automatically when a new rhythm or grid is loaded.
Grid: The Grid button cycles through step resolutions — Straight 16th, 32nd, 64th, 128th, and Triplet 8th. Use finer grids to tighten rolls or for experimentation.
Flam offset: Grace notes (shown as small blue cells) fire this many milliseconds before their step. Increase for an open flam, decrease for a tight crush. Adjusts live.
Custom patterns: Edit any pattern text field directly and click Update Patterns — changes apply without stopping playback. Patterns can have different step counts; each layer loops independently at its own length.
Saving patterns: Type a name in the Saved Patterns panel and click Save to store the current patterns, tempo, grid, and flam offset in your browser. Select a saved name from the dropdown and click Load to restore it, or Delete to remove it. Saved patterns persist across page refreshes.
Select a rudiment from the list, then press Load to apply it to the player.
Select a rhythm — the first variation is pre-selected. Change the variation if desired, then press Load to apply it to the player.
This player is built on Tone.js (v14.8), a Web Audio framework for interactive music in the browser.
Key Tone.js APIs used:
Tone.Players — loads multiple named audio samples (Doum, Soc, tek, ka) from URLs and routes them to the speaker output.Tone.Sequence — step sequencer that fires a callback at every grid subdivision (16n, 32n, 64n, 128n, or 8t). Each pattern layer runs its own sequence and loops independently.Tone.Transport — the global clock. Controls start/stop and BPM. All sequences stay phase-locked to the Transport, so tempo changes and pattern reloads never drift.Tone.getDraw() — schedules visual highlights in sync with audio output time rather than the scheduler lookahead, keeping the amber step indicator aligned with what you hear.Tempo conversion: The BPM slider uses a "feel" value matching the original Strudel build. Internally, Transport.bpm = sliderBPM / 2. This comes from Strudel's formula where CPM = (sliderBPM × 2) / 16 steps, and each step is a 16th note.
Grace notes (flams and drags) are implemented purely in time — no extra grid steps needed. A g-prefixed token fires the sample flamOffset ms before its step; a gg-prefixed token fires twice (at −2× and −1× the offset), producing a drag.