Online Metronome

A steady metronome in your browser with tap tempo and accented downbeats, scheduled on the audio clock so the beat never drifts.

120BPM

Clicks are scheduled on the audio clock rather than a timer, so the beat stays steady even when the page is busy. The first beat of each bar is accented.

How to use Metronome

  1. 1Set a tempo with the slider, a preset, or by tapping along with the beat you want.
  2. 2Choose how many beats are in a bar. The first beat of each bar is pitched higher.
  3. 3Press start. Adjust the tempo while it runs and it follows immediately.

Why an online metronome usually drifts, and why this one does not

This is the one thing that separates a usable browser metronome from a frustrating one, and it is worth understanding.

The obvious way to build it is setInterval, firing a click every 60/BPM seconds. It does not work. setInterval is a request, not a guarantee: the callback runs when the main thread next has a free moment, which under any real page load means a few milliseconds late. Each click is then scheduled relative to when the previous one actually ran, so the errors accumulate. Within a minute the beat has visibly slipped, and if the page does anything at all (a render, a garbage collection) you hear it stumble.

The fix is to stop treating the main thread as the clock. Web Audio has its own clock, driven by the audio hardware and accurate to the sample. So instead of playing a click when a timer fires, this schedules clicks in advance at exact times on that clock. A loop wakes up every 50 milliseconds, looks a quarter of a second ahead, and books any clicks due in that window. The main thread being late no longer matters, because it is only booking appointments, not keeping them.

The audible result: the tempo is exactly what the number says, indefinitely.

A metronome with tap tempo, beats per bar and an accent

The first beat of each bar is pitched higher than the rest, which lets you hear where the bar begins instead of counting to stay oriented.

Set the beats per bar to your time signature. Four for common time, three for a waltz, six for a 6/8 feel, two for a march, eight when you are subdividing. Setting it to two while playing in four still works, you just get an accent twice as often.

Using it against picture

If you are cutting to music, tempo is the grid your edit points should land on. Finding the BPM of the track and setting it here gives you an audible reference while you scrub, which is often faster than counting frames.

The arithmetic is worth knowing: at 120 BPM a beat is 0.5 seconds, which is 12 frames at 24fps and 15 at 30fps. A bar of four is 48 frames at 24fps. Cutting on the bar rather than the beat is what makes an edit feel composed rather than merely rhythmic.

Volume, and a note on clicks

Start the volume moderate. The click is a short square-wave blip, which is deliberately sharp so it cuts through an instrument, and that also makes it fatiguing at high volume over a long practice session.

Nothing is installed and nothing is recorded. The tool exists entirely in this page.

Frequently asked questions

Why do some browser metronomes drift and this one does not?
Because a timer is not a clock. setInterval fires whenever the main thread is free, which under any load is late by a few milliseconds each time, and those errors accumulate. This schedules each click ahead of time on the audio clock, which is sample-accurate and unaffected by page load.
What does the accent do?
It pitches the first beat of each bar higher, so you can hear where the bar starts without counting. Set beats per bar to match your time signature: 4 for common time, 3 for a waltz, 6 for compound time.
Can I use this while another tab is active?
Audio keeps playing when the tab is in the background, but browsers throttle timers in hidden tabs, so the scheduling can become uneven. Keep the tab visible for anything you are actually playing along to.
Does the tap tempo need a lot of taps?
Three is the minimum and more is better. Outliers beyond twice the median interval are discarded, so one late tap will not throw the answer off. Pausing for a few seconds starts a fresh count.

More free tools