A post about building a simple musician's gig set list web app that includes a preset metronome for each song.
Song list with tempos
Now gig ready
The Set List App
Before I start on what might turn out to be a long rant about annoying metronomes and annoying websites, you can check out the BPM List app at bpm.falkus.co, or the bpm-list repo on GitHub if you want to host your own.
The tool is a completely browser-based set list app with a built-in metronome. The ‘state’ is in the URL, so you can make changes and send links around. e.g. here is the set list for the soul/disco set from Friday’s gig.
The site has a ‘Gig Mode’, which is basically a slightly simpler UI that also makes the song titles and BPMs all read-only.
Background: The Gig Prep
I’ve been gigging as an amateur drummer in various bands for the last 18 years or so. This is very much on the hobby end of things. This year I expect to play in probably four gigs, maybe five if something extra gets booked in for the autumn.
In the pre-gig rehearsals I’ll have the working set list in a note on my phone. Then, before the actual night of the gig, my prep ritual typically involves copying that note file into a Google Doc, making the font big, then writing out the tempo for each song (the beats per minute) typically by listening to the original record. Sometimes I’ll scribble some extra notes after printing, maybe even some drum notation if there’s a particular groove or fill I’m unlikely to remember accurately on the night.
The keen reader might ask...
Don't you need to know the song tempo ahead of the
gig for the rehearsals?
Why wait until just before gig time to write that out?
A fair question. The answer, at least for me, is that in a rehearsal you've got time to hum a few bars and get the tempo right in your head before counting the band in. During a gig that's tricky, sometimes there is a desire to 'keep the party going', so the band want to flow quickly from one song to the next.
There is also a very real phenomenon of bands playing live music faster than the record. A little bit of that is OK, but I find you typically want to know the reference tempo to not be completely blasting through tunes.
Does This Need A Website?
Two things happened recently that made me think a mini website might be useful. First of all, my trusty Seiko SQ 100 metronome ran out of battery and I didn’t have a spare with me. Secondly, I found using the Google metronome infuriating.
Some metronomes have a ‘tap’ feature, where you tap along to a song and it uses the intervals of your taps to figure out the bpm. Now, my Seiko metronome doesn’t have a tap feature. That means I’ve gotten used to adjusting the tempo then quickly stop/starting it to see if it fits.
This only works if the metronome starts as soon as you tell it to. Google’s built-in metronome does not, instead having a tiny delay. That means it feels near impossible to accurately kick it off whilst listening to a song to confirm a tempo. If you want to try this at home:
- Hit play on Rick Astley’s classic, ‘Never Gonna Give You Up’. The BPM for the video is ~114.
- Try to get the metronome click to line up with the beats in the song on Google’s Metronome.
- …then on BPM List Metronome (tap the space bar for an accurate start).
Build Notes
There is nothing particularly noteworthy about the tech on the site. The wish list was fairly easy to follow:
- Metronome that has to start when you press start
- Metronome needs a visual element and a volume control
- As simple a UI as possible
- All state in the URL (I don’t want to host a server part to this if I can help it, plus it’s easy this way to share lists)
- Avoid third-party frameworks, should be buildable with plain HTML/CSS/JS etc
- Bonus: Tap-for-tempo functionality
Once I started trying it out I found that keyboard input was really helpful, e.g. space bar to start/stop the metronome, tap the letter ‘t’ to set the tempo and update the entered bpm figure.
A Note on Compromises
As programming is so quick these days, it felt like a discipline to not keep cramming in more features. e.g. the key for each song may be useful, or some other ‘notes’ area. In the end I decided that a user can do this already. i.e. The user has a text box they control, it doesn’t have to be solely the song title in there, maybe their own convention will be the song’s key in brackets.
Perhaps the most obvious limitation is that the metronome is assuming a 4/4 signature. The click on beat 1 is pitched differently, then the user hears 3 ‘normal’ beats. For my purpose, almost all popular music in my current bands is in 4/4. For songs that aren’t you can still sort of use audio from a 4/4 metronome, just ignore the different sound of the first beat. The song metre can still be detected.
The visual part of the metronome is using setTimeout. That seems fine, but
I’m not sure if that is particularly reliable. JavaScript’s event loop can drift
here. Perhaps something to revisit
after some real-world usage.