HTML5 Audio

Great news! As of v25, Firefox now comes with the Web Audio API enabled by default on Mac, Windows, and Linux versions, bringing us near parity across browsers for advanced audio support! While there is much to do still, it is exciting to see Firefox finally get their implementation out the door so developers can start producing better audio right away. At the moment, there are some differences between the implementations in Firefox and WebKit-based browsers, so Mozilla has provided a tutorial on what to look out for. Soon, however, we'll see all implementations become the same, as the Audio Working Group is striving hard for universal compatibility and implementation.

Unfortunately, we're still stuck with lack of codec support for H.264, AAC, and MP3, as Firefox will only decode those using OS or hardware support, which leaves it only usable in the Windows version.

A while back I posted an example that demonstrated the new inner loop marker functionality in the Web Audio API. At the time I noted that I used a WAV file in my example because it inherently looped correctly on the first try. It seems I wasn't the only one who wondered about seamless looping audio in a browser.

Daniel Gagan went another step and discovered that identical files are being decoded as different lengths on different browsers. With the notable exception of WAV format, every audio format is supported differently in every browser, and sometimes between operating systems, despite being supplied the same files.

In my view, Daniel is actually too lenient. So long as the loops come out relatively close to the same length, he gives the browser a pass. But I would say there seems to be a significant lapse of sample accuracy across browsers, which is something that definitely needs to be fixed.

Charlie Roberts has created a new JavaScript library that provides interesting, simple access to complex audio coding. It's called GIbberish and it's designed with JIT in mind, but could be useful in lots of applications. As he puts it:

Gibberish is different from other JavaScript audio libraries (such as audiolib.js or Audiolet) in that it generates code that is heavily optimized for JIT compilation. The code that is generated is arguably not human-readble, hence the name Gibberish.

Gibberish comes with a long list of pre-defined oscillators and effects and there's a live demo which I was able to try effortlessly on Chrome, Firefox, Safari, and even Mobile Safari on the iPad!

For extra credit, you might also find of interest a research paper titled The Web Browser as Synthesizer and Interface, published by Roberts, along with Graham Wakefield and Matthew Wright.

Josh Nielsen sent me an interesting synth he recently built. The synth has the ability to create patches, work to a metronome, and even lets you record loops and store them inside the Loop Module. (Incidentally, the Loop Module also supports microphone recording, so there are all kinds of ways this synth can be used.) I love the fact that there are realtime waveforms being displayed, both when playing the synth and for the Loop Modules, courtesy of Wavy-Jones. Oh, and it provides Web MIDI API support, too, relying on Chris Wilson's polyfill.

And best of all it is open source and available on GitHub!

Stuart Memo sent me his new synthesizer a while back and it got stuck in my backlog. I must admit it's the simplest example of a Web Audio API synth I've seen so far. The code is quite easy to read and comprehend and should make an excellent starting point for anyone who wants to write their own Web Audio-based synthesizer.

The Sympathetic Synthesizer is also available as a Chrome app. And the code, like all of Stuart's other excellent examples, is available on GitHub.

Remember the idea suggested a year ago about building a standardized framework for Web Audio API-built effects? Jordan Santell and Nick Thompson have picked up the gauntlet and released the Web Audio Components specification and built an implementation of their own. So far they've got a comb filter, overdrive, delay, simple reverb, white noise, pink noise, and more. And you can submit your own creations to be included, something already done with WAAClock!

Also be sure to check out the discussion group.

Sébastien Piquemal has created a small open source framework that provides comprehensive event scheduling for Web Audio API implementations. From the documentation:

Because Web Audio API events cannot be cancelled, WAAClock simply queues all events, and schedules them only at the last moment. In fact, each event has a tolerance zone [t1, t2] in which it should be executed. Each event is scheduled as soon as the clock enters its tolerance zone. On the other hand, if the event hasn't been scheduled when the clock gets out of the tolerance zone, the event will be dropped. Therefore, you should use this setting wisely : a too tight upper bound (lateTolerance), and the event can be dropped abusively, a too loose lower bound (earlyTolerance), and the event will be scheduled too early.

You can set the default tolerance with the options lateTolerance and earlyTolerance. You can also set the tolerance on a "per-event" basis, by calling the tolerance method of the event.

There are two working examples you should definitely check out, too: simple repetitive pattern and basic sequencer.

Chris Rogers posted on the Web Audio Dev Community Group to let folks know that initial experimental support for the new Web MIDI API has shipped in the latest Chrome Canary. Chris Wilson also provided a more detailed post with information, including some documentation about SysEx support, name changes, and other updates to the API and his polyfill.

Excellent news from Google, who have released a new beta of Chrome v28 for Android which includes a flag to enable Web Audio API support in the Android version. I don't currently have an Android device to test this on, so I'm anxious to hear about people's experience with this! Please send me feedback!

David Lindkvist from 14islands sent me their latest fun app (another collaboration with Plan8), Chrome Racer, which makes use of the Web Audio API for sound and music, and falls back to the <audio> element when Web Audio API is unavailable. There's also a nice "behind the scenes" article and video about the music and sound design.