Reading the Firefox 76 Release Notes I noticed that it now supports AudioWorklet. I tested out my whistle-controlled bass synthesizer, and it felt much better than in Chrome, though still not as responsive as the native version. I decided to take some latency measurements.

I connected the computer to an external speaker and microphone, set the browser to run a simple AudioWorklet-based echo, and set my phone to record. I made a sharp tapping sound, and looked at the recording to see the delay from when the original sound is recorded to when the echo plays it back.

I tested Chrome and Firefox. I would have liked to compare to Safari, since Apple has historically taken audio latency very seriously, but they haven't implemented the AudioWorklet spec yet. I also tested Reaper and PortAudio [1] for comparison.

Here's what this [EDIT: initially, see update at the end where everything gets faster] looked like with Reaper, Firefox, and Chrome all set to echo:


I made twelve clicks in a row, and saw Reaper at 15ms, Firefox at 62ms, and Chrome at 124ms. I learned which echo was which by turning off each in turn.

You would expect that latency would be completely consistent, because you can't change the length of the delay without getting ugly artifacts, but in Chrome it was not consistent. Earlier I made a much longer recording (mp3) and taking the two sections where you can clearly hear Chrome echos (mp3, mp3) I get 78ms, 78ms, 77ms, 94ms, 94ms, 93ms, 93ms, 93ms and then later 88ms, 88ms, 88ms, 88ms, 88ms, 93ms, 109ms, 109ms, 114ms, 114ms, 120ms, 147ms, 152ms, 152ms, 152ms, 152ms, 152ms, 152ms, 152ms, 152ms, 152ms, 163ms, 153ms, 153ms. Since one of the projects I'd like to do with browser audio requires completely consistent latency, I'm not sure it would work at all in Chrome.

PortAudio compared very similarly to Firefox, about 3ms faster. I'm not sure what Reaper is doing to get much lower latency than PortAudio and Firefox? If I was going to look into this further my next step would be to log which system calls they're making and try to figure out what they're doing differently.

Overall, I'm very impressed with Firefox's AudioWorklet implementation's performance, and I hope Firefox pushes Chrome to do better as well.

(Disclosure: I work for Google, which makes Chrome. I don't work on the browser, though, and I'm speaking only for myself.)

Update 2020-05-07: after I published this, Chrome folks told me that passing {latencyHint: 0} when starting the AudioContext would tell it to use a smaller buffer. I was surprised by this, because the spec says the default value for latencyHint is "interactive: Provide the lowest audio output latency possible without glitching." But it does help, across browsers.

Then Björn on LW pointed me to the getUserMedia call and recommended setting echoCancellation: false. I looked at the other settings available there and additionally decided to turn off noiseSuppression and autoGainControl, and set latency to zero. (echo-demo-v4)

With all of these together, latency was much better in both Chrome and Firefox. Here's a long recording (mp3) of Reaper vs Firefox vs Chrome. This time Reaper was consistently 11ms and Firefox 14, but Chrome was not consistent. I got latency as low as 19ms, but as high as 41ms. I took a longer recording with Chrome (mp3) where you can see the latency as low as 19ms (most of the recording, including, ex, 0:10) but as high as 30ms (ex: 1:37). I wonder whether Chrome might be trying to dynamically determine what level of latency it can manage without dropouts?

I've updated my whistle-controlled bass synth to use these settings, and on my Mac it's now great in Firefox, and nearly as good in Chrome.

[1] I used paex_read_write_wire.c with FRAMES_PER_BUFFER set to 64 and suggestedLatency set to defaultLowInputLatency and defaultLowOutputLatency. I installed portaudio (brew install portaudio) and then ran gcc paex_read_write_wire.c -o paex_read_write_wire -lportaudio && ./paex_read_write_wire.

New Comment
2 comments, sorted by Click to highlight new comments since: Today at 8:46 AM

Interesting read, thanks! To get the numbers down further, I believe you need to disable echoCancellation in the getUserMedia call. You can also supply a latencyHint to the AudioContext() constructor to push the latency down further.

Awesome, thanks! I've now updated the post with more recordings based on turning off echoCancellation (and some other things) and it's much faster now.