How to use it
- Set the tempo with the slider, the ±1 and ±5 buttons or the number box (20 to 300 BPM), or tap the Tap button (or the T key) in time with the music.
- Choose beats per bar (the first beat of each bar is accented with a higher click) and a subdivision: eighth notes, triplets or sixteenths add quieter clicks between the beats.
- Press Start (or Space). To build speed, turn on the speed trainer: it adds a set number of BPM every few bars until it reaches the limit you choose.
Why the clicks stay in time
A metronome that plays each click from a JavaScript timer is only as steady as the page: when the browser is busy, the timer fires late. This one uses the Web Audio API’s own clock instead. A short timer runs every 25 ms, but it only looks ahead and books the clicks due in the next 0.2 seconds at exact times on the audio clock; the audio system then starts each click on its sample. The click times are worked out from the tempo and the note number, not by adding up intervals, so nothing drifts over a long practice session. The beat lights follow the audio clock too.
We measured the difference. Rendering the page’s own scheduler into an offline audio buffer at 48 kHz, every one of 229 clicks across 6 settings (20 to 300 BPM, 2 to 7 beats per bar, triplets and sixteenths, a speed-trainer run) began within 1.02 samples of its exact time, about 21 microseconds, and had the right pitch for an accent, a beat or a subdivision. A plain timer set to fire every 500 ms (120 BPM) on a page doing a 40 ms task every 300 ms was up to 40.5 ms late, 13.8 ms on average.
Tap tempo and the speed trainer
Tap tempo averages the gaps between your last nine taps (eight intervals), so one uneven tap moves the result less; a pause of more than two seconds starts a new count. The speed trainer raises the tempo at the start of every block of bars you set and holds it there to the end of the block, and it never goes past your limit.
What we tested
On October 15, 2026, in Chromium: the offline render above, with each click’s onset found in the samples and compared with the exact time from Python fractions; two broken versions were caught (a speed trainer that ignored the earlier, slower blocks failed its run, and a tempo 1% slow failed 5 of the 6 settings). A live run at 150 BPM lit all four beats in turn and stopped cleanly; tap tempo gave 120 BPM for taps 500 ms apart and restarted after a 2.4-second pause; at 390 px wide the page fits with no errors.
Sources
- W3C, Web Audio API (the audio clock,
currentTime, and starting sources at a scheduled time). - MDN, BaseAudioContext.currentTime.
Frequently Asked Questions
Built by Derek Giordano · Part of Ultimate Design Tools