Metronome

Why browser metronomes usually drift

The obvious way to build one is a timer that fires every so many milliseconds. It does not work. JavaScript timers are only approximate, and they are delayed by anything else the page or the machine is doing. Over a minute the clicks wander audibly, which is precisely the flaw a metronome cannot have.

This one uses the approach the Web Audio API was designed for. A timer runs frequently but does not make any sound itself — it looks a fraction of a second ahead and schedules clicks on the audio clock, which is driven by the sound hardware rather than the browser's event loop. Each click is booked for an exact moment before it is due, so timer jitter never reaches your ears.

The accented downbeat

The first beat of each bar is pitched higher and slightly louder. That is what makes a time signature audible rather than a stream of identical clicks, and it is what lets you hear when you have drifted onto the wrong beat.

The dots show the position in the bar, with the downbeat marked.

Tempo markings

The Italian name updates with the slider, because printed music gives tempo that way as often as in numbers:

• Largo 40–60 — broad and slow
• Adagio 66–76 — at ease
• Andante 76–108 — walking pace
• Moderato 108–120
• Allegro 120–156 — lively, the most common marking
• Presto 168–200 — very fast

These are conventions rather than rules, and they varied by era and composer. Treat them as a range, not a setting.

How to practise with it

1. Start slower than feels necessary. If you cannot play a passage perfectly at a slow tempo, playing it fast only rehearses the mistakes.
2. Move in small steps. Five BPM at a time, and only once the current tempo is clean three times running.
3. When it falls apart, drop back two steps, not one.
4. Try putting the click on beats two and four once you are comfortable. It is much harder and far more useful for internalising time.
5. Practise without it too. The goal is an internal pulse, and a metronome can become a crutch that hides the fact you have not developed one.

Common uses

• Building speed on a difficult passage.
• Recording, where a steady tempo makes editing possible.
• Finding the tempo of a recording with the tap button.
• Group rehearsal, where everyone needs the same reference.

Questions people ask

Is this metronome accurate?

Yes. Clicks are scheduled on the audio hardware clock rather than fired by a JavaScript timer, so browser lag does not affect the timing.

What do the Italian names mean?

They are traditional tempo markings. Andante is walking pace around 76–108, Allegro is lively around 120–156. They are ranges rather than exact settings.

How do I use the tap tempo?

Tap the button along with the music at least four times. It averages the gaps and sets the BPM.

Does it work with the tab in the background?

Browsers throttle background tabs, so timing may suffer. Keep the tab visible while practising.

What is 6/8 doing in the list?

It is counted as six, with the accent on the first. Strictly it is usually felt as two groups of three, so you may prefer to set 2 and think in triplets.