# Metronomes in JavaScript

DevFeed: [Metronomes in JavaScript](<https://devfeed.tech/articles/metronomes-in-javascript-35529.md>)

Original publisher: [Read original article](<https://meowni.ca/posts/metronomes/>)

Author: Monica Dinculescu

Published: 2019-09-10T00:00:00Z

Content type: article

Language: en

Sources: [Monica Dinculescu](<https://devfeed.tech/sources/monica-dinculescu.md>)

Topics: [JavaScript](<https://devfeed.tech/topics/javascript.md>), [Latency](<https://devfeed.tech/topics/latency.md>), [Code](<https://devfeed.tech/topics/code.md>), [async](<https://devfeed.tech/topics/async.md>)

Tags: [async](<https://devfeed.tech/tags/async.md>), [javascript](<https://devfeed.tech/tags/javascript.md>), [latency](<https://devfeed.tech/tags/latency.md>), [worker](<https://devfeed.tech/tags/worker.md>)

## AI overview

An experiment compares three JavaScript approaches to scheduling metronomes: running timing code on the main thread, using a Worker, and using the Web Audio clock. The article focuses on how blocking and latency affect accurate musical timing.

## Source excerpt

My job nowadays involves a lot of music and JavaScript. You know what musicians really care about? Paychecks (support your local musicians, go to concerts, don't steal music from indie musicians). But also: keeping time. Keeping time in JavaScript is kind of a joke, not just because time is a social construct (this is the Jenn Schiffer social engineering at work), but because it's really easy to write code that blocks the timekeeper. Remember: JavaScript inherently only has one thread, which it uses for everything: painting your buttons, looping through arrays, mining bitcoin, scrolling. Everything. This means that most of the time, you write blocking code, but it only blocks for a little bit - 1ms here and there. And that's ok! Visually you don't notice that kind of latency, and let's be honest: it takes like 400ms to download the scripts, what's 1ms? 1ms starts getting in the way when it's actually 5ms, or 40 ms, or when you're trying to have a metronome run correctly. I made a typing delay experiment to see how much delay people could tolerate, and just for typing alone some people got really antsy around 200ms (shout out to the section of the population who thought they were heroes because they could tolerate infinity delay because of how bad ssh latency is. That's not heroic, that's Stockholm syndrome. Complain to your sys admins). When I changed that to an audio delay experiment, musicians started complaining around 40ms. And that was just audio delay, not an actual metronome. Imagine that fucking with your audio too! So, keeping time is really important - but how do we actually do that in JavaScript? In general, when we want to not block in JavaScript (and do better than setInterval, who is the friend you invite to a party but shows up like +/- 4h to it), we do one of two things: start writing async functions, or move code to a Worker (Surma has a great article about workers everyone should read). In particular, for audio things, there's a third option: using