Clicker & Rhythms

What it is

A metronome for drummers, built around the things a plain click can’t do. Odd time signatures, per-beat accents you set by clicking them, subdivisions, extra pulses layered across the bar for polyrhythm work, a gap-click mode that drops out for a few bars to find out whether you’re really holding time, and rudiments that show the sticking as they play.

Why I built it

I play drums, and the practice tools I actually wanted were all paid iPhone apps. PolyNome, Benny Greb’s Gap Click, Time Guru. They’re good, and they’re three separate purchases for things that ought to live in one place. Meanwhile every free metronome on the web is the same beeping box.

There’s a technical reason as well. Most browser metronomes are timed with setInterval, which drifts, because a JavaScript timer is not a clock. Over a long practice session you can hear it. That bothered me enough to want to do it properly.

How it works

The clock is the whole thing. Nothing is timed by a JavaScript timer directly. A timer wakes up every 25 milliseconds and schedules the next 100 milliseconds of audio onto the Web Audio clock, which runs on the audio hardware and is sample-accurate. The timer is allowed to be late, and often is. The clicks still land exactly where they should.

The page shows this working rather than just claiming it. A panel compares three numbers live: the jitter of the JavaScript timer, the accumulated drift of a shadow setInterval running the naive way, and the actual placement error of the scheduled clicks. Under heavy load I’ve watched the timer wander by 143 milliseconds while the placement error sat at zero.

Every sound is synthesised, no samples. The click is a square wave, the extra layers are woodblocks pitched below it, and the rudiments are filtered noise with a bit of body underneath. Getting the layers audible needed a rethink: the first version put them in the same frequency range as the click’s own harmonics, so they were technically playing and effectively inaudible, buried under the very thing they were meant to contrast with. Moving them well below the click fixed it.

Rudiments loop continuously instead of restarting each bar, so patterns whose length doesn’t divide the bar still play whole rather than being chopped off at the barline. Right and left are pitched slightly apart, so you can hear the sticking as well as read it.

What I’d change

It isn’t finished, and the two features that would make it genuinely better than an app are both still to come. Practice routines encoded in the URL, so a teacher can send a student a link that is the exercise rather than a set of instructions. And click-track export, for bands running in-ears.

The rudiment set is eleven patterns rather than the full forty. The scheduler should probably move into a Web Worker before this goes near a phone, since a backgrounded page can be suspended outright.

How to use it

Set a tempo, or tap it in. Click any beat to cycle it between accented, normal and silent, which is how you get odd groupings out of an ordinary bar.

Add a layer when you want a polyrhythm. Three against a bar of four, then five against four on top of that if you’re feeling brave. Each layer has its own level and mute, and each gets a different pitch so they never blur together.

For timing work, turn on the gap click. It plays four bars and drops four, taking the display with it, and you find out quickly whether you were keeping time or just following the click. For rudiments, pick a pattern and watch the sticking highlight as it sounds. Accented strokes are underlined, and the small letter in the corner of a cell is the grace note of a flam.