DETERMINISTIC
Pattern input
A drummer chooses a preset or writes a sequence using left, right and accent notation.
EXPERIMENT 07LIVE
Drum Metronome
A metronome built around how drummers practise
Can a practice tool make the sticking, accents and timing of a drum pattern as clear as its tempo?
Drummers practising rudiments, coordination, subdivisions and polyrhythms.Open the live Drum Metronome
THE PROBLEM
What is actually going wrong
A standard metronome gives you a pulse. For drummers, that is often only part of the exercise. The pattern may alternate hands, place accents in awkward spots, change subdivision or deliberately disappear for a few bars.
Keeping all of that in your head while trying to play cleanly turns practice into an admin task. The tool should carry the pattern so the drummer can focus on listening and playing.
WHAT I DID ABOUT IT
I built
A browser-based metronome for drum practice. It accepts custom left and right hand sticking patterns, supports accents and includes presets for common rudiments.
It also includes tap tempo, tempo markings, visual beat feedback, gap training and polyrhythm modes. The timing is generated with the Web Audio API rather than relying on visual animation timing.
TRY IT YOURSELF
Demo
The application runs separately. It opens in a new tab.
Open the live Drum Metronome
BEFORE AND AFTER
What changed
Before
The exercise plus the mental bookkeeping- Set a generic tempo
- Remember the sticking pattern
- Count accents and subdivisions
- Practise
After
One configured practice loop- Choose a preset or enter a pattern
- Set the tempo
- Follow the click and visual beat
- Practise
Generic pulseSticking-aware pattern
Counted mentallyHeard and shown
Manual adjustmentTap, marking or BPM
ARCHITECTURE
How does it work?
DETERMINISTIC
Practice settings
Tempo, subdivisions, gap training and polyrhythm settings define how the pattern should run.
DETERMINISTIC
Audio scheduler
A short look-ahead scheduler places clicks on the Web Audio timeline, so the audio timing does not depend on when the browser redraws the page.
STEP 04
Feedback
The active beat and accents are shown alongside the audio cue, so the pattern remains legible while playing.
The important split is between interface timing and audio timing. The screen can lag without moving the click, because the audio engine owns the schedule.
OUTCOMES
What changed in practice?
- POTENTIAL
A sticking-aware click could reduce the mental load of running a structured rudiment or coordination exercise.
- POTENTIAL
Gap training and polyrhythm modes could make exercises that need several tools accessible from one practice loop.
Observed means measured in a real engagement. Estimated is reasoned from the work but not measured. Potential is what the approach makes possible. Nothing here is dressed up as more than it is.
WHAT FAILED
What didn't work
Letting the browser timer decide when each click should play.
Browser timers are useful for deciding what needs to happen next, but they are not a reliable audio clock. A late callback can make a practice click feel uneven.
WHAT CHANGED
The scheduler now looks ahead from the Web Audio clock and queues clicks before they need to sound. The browser timer wakes the scheduler, while the audio engine keeps time.
CODE
See the implementation
PUBLIC REPOSITORY
The full Vue and TypeScript implementation is public, including the Web Audio scheduler and practice-mode components.
View the repositorySHARE AND ENJOY
Share and enjoy
Tell me what's going on. I'll come back within a business day, and if I'm not the right person for it I'll say so.