How to Use This Rhythm Player
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. Brackets spread strokes evenly over several cells: [t k t k]:3 plays four even strokes across three cells (e.g. "1 e &"); without :3 each stroke gets one cell. Dynamics: add > after a stroke for forte (t>, louder — shown larger with a dark bar) or . for piano (k., softer — shown faded). They work on any stroke, grace note, or group slot (gk., [t> k. t k.]:3).
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. Keyboard: Space plays/stops and Alt+R resets to the top.
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.
Tempo Changes
Rudiments
Rhythms
Saved Patterns
Songs
Mastery
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.
While the song has rows, Play plays the song. Loading a rudiment, rhythm, or saved pattern pauses the song so that pattern plays instead — Back to song resumes it. Clear song empties it and returns to playing the single loaded pattern. Parts come from your Rudiments, Rhythms, and Saved Patterns. Each row's Speed plays it at a multiple of the song tempo (×0.5 = half speed), so the slider and Tempo Changes still scale the whole song; Fixed BPM pins a row to one tempo that ignores both.
About: Tone.js Drum Pattern 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, or8t). 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.
Accessibility (WCAG 2.1 AA): This player is designed to meet the Web Content Accessibility Guidelines (WCAG) 2.1 at Level AA. Every control works from the keyboard — Tab moves between controls, Enter or Space activates them, and outside a text field Space plays/stops and Alt+R resets. Controls have visible focus outlines and screen-reader labels, text meets AA color contrast, status changes such as "Ready" and "Marked as passed" are announced to screen readers, and the layout reflows to 320px wide (400% zoom) without sideways scrolling. Last checked September 2026 with automated testing (axe-core) and manual keyboard testing. If you run into an accessibility barrier, please let me know through music.donavonlerman.com.