I wanted to try and make it without any custom JS functions, but I was worried about the amount of space that 170 different BPM audio files would take. I figured the best way to do it was create one metronome click with a different amount of space after the click for each BPM audio file and loop it… This way, each audio file would only be 10 KB. Before I created and exported each BPM (40-210 BPM), I tested out just one to see if the loop would have any delay and not actually match up with the true BPM of a regular metronome. To my surprise, it matched up exactly with no delay. After spending a couple more hours, I realized I only tested it on Safari and not other browsers.
Turns out all the other browsers have a delay when looping an audio track, which makes every BPM track off.
Any ideas to solve the delay issue? Or even an alternate method to simulate a metronome?
Hype uses three different methods to play audio depending on the browser/device: WebAudio API, HTML <audio> tag, and QuickTime plugin. WebAudio API is the only one that will provide low latency audio and does work on a lot of browsers nowadays, but it doesn’t surprise me that the timing for the loop property might vary a little bit. If Hype has to fallback to the other methods you definitely will not get the exacting BPM.
Using your own MP3 files for each BPM is the easiest solution. If you wanted to go the coding route, you could definitely use the WebAudio API yourself to do this, but instead of using the loop property generate a big buffer on the fly and line up the metronome sound to the BPM. It’d be a bit of coding of course .
I did some research after I left this post, realizing there probably wasn’t a good solution to this problem using this method. I ended up finding some awesome JS that uses equations to calculate the beats per minute of whatever value you set the slider at and also uses OscillatorNode to create the sound. Here’s the final product: guitarjo.com/metronome
I didn’t make it through Hype though, it was easier just to do everything through the HTML/CSS/JS files.
.