File Under: APIs, HTML5, Web Standards

BBC Taps the Past to Showcase the Future of Web Audio

Mixing old school tape loops with the BBC’s Web Audio API demo. Image: Screenshot/Webmonkey

HTML5 offers developers new ways to display and work with both audio and video on the web. The HTML5 <video> element tends to get more attention, but the HTML5 audio element is equally revolutionary, perhaps even more so thanks to the work-in-progress Web Audio API (currently in the draft stages).

Developers at the BBC recently set out to push the limits of what you can do with HTML5 <audio> and the Web Audio API. The result is a new audio playground site that recreates the sounds of the BBC Radiophonic Workshop using the Web Audio API. Note that right now only WebKit browsers support the Web Audio API. (Firefox supports the older, deprecated, Audio Data API, but plans to ship support for Web Audio in 2013.)

The BBC’s Radiophonic Workshop project is one part cool demo, one part tutorial. It’s fun to play around with, sure, but another reason behind the experiment is to document how to use <audio> and the Web Audio API. The developers also wanted to put the API through some real-world use cases, to see if there are any limitations that could be addressed before the Web Audio API becomes an official standard.

Each of the four demos has a thorough code walk-through showing exactly how it works and which elements of the Web Audio API are being used. There are a couple of dependencies, namely JQuery and Backbone.js, but most of the code is working directly with the Web Audio API.

If you’ve ever wanted to explore the Web Audio API, these demos make a great introduction to how everything works. For more background on the project, see the BBC’s Research and Development blog.

So far the code doesn’t seem to be available through the BBC’s R&D GitHub account. You can always copy and paste from the demo site, but it would be nice if it was available for easy forking and experimentation.