audioJS

Metronome

Set the tempo and press start. Tap it in, accent or mute any beat, add subdivisions.

Space starts and stops, T taps the tempo; in the number, ↑ ↓ step 1, with Shift 10

Nothing is uploaded. Everything runs in this tab with web-audio-api.

A metronome timed by the audio clock

A metronome is only as good as its timing. Timers in a web page can fire late by tens of milliseconds while the page is busy, which you would hear as a wobble. So this metronome never plays a click from a timer: every 25 ms it lays the clicks due in the next tenth of a second on the audio context's own clock, and the audio hardware plays them at those times12. A change of tempo, beats or sound takes effect from the next click laid.

Accents, subdivisions and odd meters

Each beat of the bar has a mark: an accent, a plain click or silence. Subdivisions add softer clicks between the beats: two (eighths), three (triplets) or four (sixteenths). Together they make any meter: 6/8 as six eighth-note beats with accents on 1 and 4, or as two beats of triplets; 5/4 as 3 + 2 by accenting beats 1 and 4.

The sounds

The nine sounds are the metronome instrument of web-audio-api3, most of them a small model of a struck body: a mechanical metronome's wooden case, a pendulum's escapement, a quartz beeper, a woodblock, claves, a small bell, an electronic beep, a broadcast pip and karatala, small hand cymbals. An accent is struck harder and, on most, higher. The same instrument runs in Node: npx web-audio-api metronome 120 X-x-X-x- plays a click pattern in a terminal.

References

  1. C. Wilson, A tale of two clocks, web.dev (2013): scheduling Web Audio with a lookahead, a timer laying events ahead on the audio clock.
  2. W3C, Web Audio API: AudioScheduledSourceNode.start(when) on the context's time coordinate system; AudioContext.getOutputTimestamp().
  3. audiojs, web-audio-api: examples/graphs/metronome.js, the instrument and its nine presets.

Questions

How accurate is the beat?

Each click is laid on the audio clock a tenth of a second before it sounds, the way the Web Audio API is meant to keep time: the sound card places it, not the page's timers, so a busy tab does not push it late. The beat dots light when the click reaches the speakers.

How do I set the tempo by tapping?

Press Tap tempo, or T, on the beat four times or more. The tempo is the median gap of your last eight taps, so one early or late tap does not throw it off. A pause of two seconds starts over.

How do I play 3/4, 6/8 or 7/8?

Beats sets how many beats a bar has. For 3/4 choose 3. For 6/8 either choose 6 at the eighth-note tempo and accent beats 1 and 4, or choose 2 with Triplets at the dotted-quarter tempo. For 7/8 grouped 2 + 2 + 3, choose 7 and accent beats 1, 3 and 5.

Can I accent or mute beats?

Press a beat to cycle it: accent (large), plain, muted (dashed). Muting beats is a way to practise keeping time yourself: mute all but the first, and the click only checks you once a bar.

Does it keep playing in another tab?

Yes. A browser runs a hidden tab's timers as seldom as once a second, so there the clicks are laid two seconds ahead instead of a tenth, and the beat goes on as set.

Is anything recorded or sent?

No. The page makes the clicks itself and keeps your settings in this browser only.

More audio utilities