How to use it
Press Start or the Space bar and the metronome clicks at the tempo shown, 120 beats per minute (BPM) until you change it. The big circle shows the current beat and lights up on every click. The dot along the bottom reaches one end exactly on each beat, so you can see the next click coming. The top corners show the bar number and the tempo.
Pick a time signature, add subdivisions to hear the notes between the beats, and choose one of four click sounds. Your settings are saved in your browser for the next visit.
Controls
- Tempo: type a number from 20 to 300, drag the slider, use − and + (hold to repeat) or the left and right arrow keys (with Shift in steps of 10).
- Tap tempo: press Tap or T at least twice in time with music. The tempo is the average of up to six intervals. A pause of more than three seconds, or a much faster or slower tap, starts a new measurement.
- Time signature: 2/4, 3/4, 4/4, 5/4, 6/8, 7/8, 12/8 or Custom (1 to 16 beats and a note value).
- Accents: click or tap a beat dot to cycle it through normal, strong, medium and mute. A muted beat is silent but still shown.
- Subdivision: none, eighths (2 per beat), triplets (3) or sixteenths (4), each with a softer sound of its own.
- Count-in: one bar before bar 1, without subdivisions and with muted beats audible.
- Speed trainer: changes the tempo by the step every few bars until it reaches the target, then holds it. When you stop, the tempo returns to its starting value.
- Keyboard: Space starts and stops, T taps, Esc stops, and Enter presses the focused button.
How it works
One beat lasts 60 / BPM seconds: 0.5 s at 120 BPM and 1 s at 60 BPM. With n clicks per beat the gap between clicks is:
The arithmetic is easy; keeping time is not. JavaScript timers are not punctual: a busy page can delay them by tens of milliseconds, and browsers slow them down in background tabs. This metronome therefore uses lookahead scheduling. The Web Audio API has its own clock, AudioContext.currentTime, which advances with the sound hardware, and a sound can be booked to start at an exact time on that clock.
A light timer wakes a scheduler about every 25 ms. The scheduler books every click due in the next 100 ms at its exact time on the audio clock and works out the following one by adding the interval. A late timer costs nothing, because the clicks are already booked; it only has to come back before the 100 ms window runs out. Tempo changes apply from the next click that is not booked yet, and the speed trainer changes the tempo exactly on the first beat of a bar.
The picture uses the same booking list. On every screen frame the page asks the audio clock which moment is being heard, corrected for output delay where the browser reports it, and draws the latest booked click. The flash follows the sound, not a separate timer.
In 6/8 each dot is an eighth note grouped 3 + 3, so beat 4 gets a medium accent. 12/8 is four groups of three, and 7/8 starts as 2 + 2 + 3.
Things to try
- Tap along with a recording to find its tempo, then practise at that speed.
- Mute beats 2 and 4 in 4/4, or every beat except 1, and check whether you stay steady when the click goes quiet.
- In 7/8, move the medium accents to turn 2 + 2 + 3 into 3 + 2 + 2.
- Set 60 BPM and switch between eighths, triplets and sixteenths to feel 2, 3 and 4 notes per beat.
- Run the speed trainer from 80 to 120 BPM, 4 BPM every 4 bars, on a passage you find hard.
- Compare 6/8 and 3/4 at the same BPM: the same clicks, grouped and accented differently.
Frequently asked questions
What does BPM mean in 6/8 or 12/8 here?
Every dot gets one click, so in x/8 time the BPM counts eighth notes. If a piece is marked dotted quarter = 60, set 180 BPM, because a dotted quarter holds three eighths.
Why does it stop when I switch tabs?
Browsers slow down timers in hidden tabs, so clicks could no longer be booked in time, and a page you cannot see should not keep making sound. Press Start when you come back.
Is the flash exactly in time with the sound?
It is drawn from the booked click times on the audio clock, so on most devices it matches the sound to within one screen frame. Wireless headphones add a delay that the browser may not report in full, so with them the click can arrive slightly after the flash.
Does it need an internet connection?
No. All four sounds are synthesized in your browser with the Web Audio API; there are no audio files to download.