Web Audio API Loops and Formats

September 23, 2013

If you like this article you'll probably like Web Audio API Demo and Web Audio API Loops too. ^_^

I'm been working on a follow-up to HTML5 Audio Loops using the newer Web Audio API. There have been a few challenges, but luckily, an equal amount of solutions.

One thing really took me by surprise though. My loops were reporting different lengths depending on a combination of audio format, OS and browser.

So, as Darkwing Duck would say... "Let's get dangerous" and do some testing.

Audio Loops

We'll be using three loops from Ana (Instrumental Sources) by Vieux Farka Touré. Thank you Mr. Touré!

Each loop is slightly edited to be exactly 4.2 seconds long.

Each loop is saved in M4A, OGG and WAV formats. The WAV being the basis for the others.

Feel free to download the loops and have a listen.

Test Setup

Each file is downloaded via a JavaScript XMLHttpRequest() function.

If a download is successful then try to decode the audio.

If the decode is successful then report the audio buffer duration.

Results for M4A

Mac OS 10.8Windows 8
Chrome 294.2013607025146484.201360544217687
Firefox 24no support4.247125
Opera 16no supportno support
Safari 64.199999809265137unavailable

In a typical production setup we would serve M4A and OGG files in order to be compatible with the most browsers. For this reason, do not worry about "no support" or "unavailable" entries.

Do worry about Firefox 24 on Windows 8 which is too far off from the 4.2 seconds we want.

Results for OGG

Mac OS 10.8Windows 8
Chrome 294.2013607025146484.201360544217687
Firefox 244.1991875,
4.197375,
4.197729166666667
4.1991875,
4.197375,
4.197729166666667
Opera 164.2013607025146484.201360544217687
Safari 6no supportunavailable

Besides Safari 6, OGG support is common among non-IE browsers. This is great.

What is not great is Firefox 24 on both Mac and Windows. Each of the three audio loops is reporting a different time. This means our loops will get more and more out of sync when played with each other. Yikes!

Results for WAV

Mac OS 10.8Windows 8
Chrome 294.1999998092651374.2
Firefox 244.1997916666666674.199791666666667
Opera 164.1999998092651374.2
Safari 64.199999809265137unavailable

Woohoo, look at that!

Not only is WAV supported in every browser but check out those accurate times too.

*Ding ding ding* We have a winner!

Conclusion

WAV file format icon from Windows VistaThe humble WAV file is best format for perfect, looping audio using the Web Audio API.

Sure, it comes with some downsides. Namely file size. Mitigate this by using mono streams (where appropriate) and by making sure your web server delivers WAV files using GZIP compression.

If you don't need perfect loops because you're making a fighting game, sound board or something else, then by all means, use more size efficient formats like M4A and OGG.

Mobile?

Safari on iOS7 returns 4.199999809265137 for both mp4 and wav. No support for ogg though.

More information is needed for other OS and browser combinations. See below to find out how you can help contribute.

Run Your Own Test

Want to generate your own test results?

Press the shiny button below, wait a few seconds and see what happens.

Cheers!