Web Audio API browser support

The Web Audio API enables web application to synthesize and process audio. It leverages the Browser optimized low-level sound processing, and exposes a rich and modular (and fun!) ways for the web application to access the lower level processing.
Originated as a WebKit only feature, it is starting to become a widely accepted standard in other browsers.

In this post I will cover the current state of support for browsers for the Web Audio API. For this purpose i’ve created a test to gather information about current browsers:

• browser compatibility test

Use it yourself to test a specific browser, or view recorded results for other browsers.

The standard is still being developed, and there are ongoing specification changes, so different browsers and browser versions use slightly different property names, even when they support the same features (see section below).

Current Browser support

• Chrome (version 30) : The leader in pushing the standard. The best performance and sound quality. Almost fully compatible with the standard spec, and slowly switching from the old webKit spec to the new one. Supported also  on its mobile version (though keep in mind that the performance might be  a bit lower).
• Firefox stable (from version 25): Supported, and the most true to the spec implementation (at least when it comes to property names). However, on the application I’m developing seemed choppy and unstable compared to the current Chrome and webkit support (but it’s still on an early stage of development)
• Firefox older versions (version 24): Not supported. There is experimental support that can be enabled through entering about:config, and setting “media.webaudio.enabled” to true, but it’s not working stably, and is limited in the API support.
• Desktop Safari: Supported from version 6. Performance seemed good (but was limited my tests). It’s a bit dated to the spec, and needs lots of shimming (see below).
• Mobile Safari: Supported (from version 6), with one big gotcha: iOS version blocks the sound output, unless it is triggered by a user interaction. The means you have to start some sound output directly from a user triggered event – more details here.
• Android browser (version 4.2): Partial support. Did not have a createOscillator() method in the versions I tested. Also some browsers which are using it (such as Dolphin, which reports Android Browser 4.3) did not support it at all.
• Other webkit based browsers:  Browsers such as Opera and Maxthon had good support (on mobile and desktop). More esoteric ones like Epiphany on Linux, had no support (perhaps they’re based on older webKit).
• Internet explorer (version 10): Not supported. No surprises here.

Again, for updated information, I suggest using the compatibility test tool.

Simulation for non supported browsers

WAAPISim (Web Audio API Simulator) is an impressive project that implements the web audio on unsupported browsers using flash or the older mozilla Audio data api,  and patches supported browsers to be streamlined with the current API specification.
However, for my own purposes the performance was just not good enough as in webKit and chrome. It might be suitable for other needs.

There are also other across-browser audio libraries that use Web Audio if available, and other solutions if not, such as https://github.com/jussi-kalliokoski/audiolib.js and https://github.com/oampo/audiolet. I did not have much experience with them.

Differences between suppoerted browsers implementations

Since the specification changed a lot, in order to have a consistent use of it, you might need to patch some browsers which simply use different object names.  Mozilla have a good article about the differences between new and old version implementations of the spec
For my application, I wrote a simple shim that patched old API calls to new ones.
Some shim like that: https://github.com/cwilso/webkitAudioContext-MonkeyPatch

There are some changes that are hard to simply shim,  such as the switch to enums instead of  integers for some properties. In that case I added the support in the application itself, and the shim just let me know if I need to set values by enum or integer.

Additional Info

• A good tutorial (though a bit outdated with the new spec): http://www.html5rocks.com/en/tutorials/webaudio/intro/
• Usage examples: http://webaudioapi.com/samples/
• Excellent documentation as always by Mozilla - https://developer.mozilla.org/en-US/docs/Web_Audio_API
• CanIUse entry for Web Audio - http://caniuse.com/audio-api
• And the spec once again - http://www.w3.org/TR/webaudio/

Hope you will find the information useful, and that soon enough the web will flourish with shiny new sound processing applications: the technology is already here!

Edits

• 11/11/2013: Updated information regarding firefox 25 support

by