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.

Image: Webmonkey

Until the codec battle plays itself out, developers looking to build native HTML audio apps are in a bit of a bind. One way around the problem is to bypass the browser and provide your own decoder.

That’s exactly what the developers at Official.fm Labs have been hard at work doing. The latest impressive release is FLAC.js, a FLAC audio decoder written in pure JavaScript. FLAC.js joins the group’s earlier efforts, which include decoders for MP3, AAC and ALAC.

Used in conjunction with the nascent Web Audio API, the new FLAC decoder means you could serve up high-quality, lossless audio to browsers that support HTML5 audio. But beyond just playback the Web Audio API opens the door to a whole new range of audio applications in the browser — think GarageBand on the web or DJ applications.

To that end Official.fm Labs has been working a framework it calls Aurora.js (CoffeeScript) to help make it easier to build audio applications for the web.

If you’d like to experiment with Aurora.js or check out the new FLAC decoder, head on over to Official.fm’s GitHub account where you’ll find all the code available under an MIT license.

The Web Audio API in action. Image: Screenshot/Webmonkey

Google is celebrating electronic music pioneer Robert Moog’s 78th birthday with a Google doodle of the iconic Moog synthesizer. Like many past doodles today’s doodle doesn’t just look cool, thanks to the Web Audio API, it’s also a working synthesizer complete with a reel-to-reel tape machine for recording.

The Moog Google Doodle uses the nascent Web Audio API to create a mini Moog and power a mock reel-to-reel recorder. At the moment browser support for the Web Audio API is limited, but the doodle will work in most browsers since it falls back to Flash where the Audio API isn’t supported (the doodle does not work in Internet Explorer).

To play the Moog, just click any of the keys so that it gains focus and then you can play using your keyboard. All the nobs are fully functional as well, just click and drag to change the settings. Hit the record button and you can save your songs and share them with others.

Behind the scenes the Moog doodle also uses Closure libraries and some CSS 3 for the design and custom fonts. Developers interested in how the Moog doodle works can check out the archived doodle page and peruse the Moog.js JavaScript file for full details (as with all Google scripts, this one has been optimized for file size; you’ll want to run it through JSBeautifier or similar before you try to read it).

Nothing fishy about IE9's hardware acceleration: This demo shows an animated fish tank rendered using Canvas.

Microsoft has released Internet Explorer 9 platform preview 3, the latest pre-release version of the company’s next web browser.

Curious developers running Windows can download platform preview 3 starting Wednesday afternoon. This version of IE9 features expanded support for specific HTML5 elements that can take advantage of the browser’s new hardware-acceleration abilities.

“Most computing tasks on the web only take up 10 percent of the PC’s capabilities,” Microsoft’s Ryan Gavin said at a press event Wednesday. “We want to unlock that other 90 percent.”

The new IE9 platform preview has expanded support for HTML5′s native video and audio capabilities, as well as expanded support for the Canvas element.

“Showing how well we handle these HTML5 elements is the point of this release,” says Microsoft’s Rob Mauceri.

Microsoft has taken a fair bit of heat in the browser world for being slow to adopt HTML5. Though not yet finalized, the emerging specification is already widely supported by Chrome, Firefox, Opera and Safari. Microsoft’s current version of Internet Explorer, IE8, is woefully behind these other browsers when it comes to support for HTML5 and other standards like CSS 3.

With IE9, due around the end of the year, the company hopes to get back on the right path.

Microsoft has engineered this version of the browser to take advantage of the latest multicore processors and GPU chips shipping in the newest hardware. Several of Microsoft’s hardware partners — AMD, Asus, NVidia and Dell — were on hand with their newest, fastest machines at the press event to show the browser preview running through some Microsoft-built demos.

The company first showed off a hardware-accelerated preview of IE9 at a developer event last year, and then upped those capabilities with the second platform preview in May. But Wednesday’s release of IE9 has some updated code to access the hardware and an updated JavaScript engine to make scripted animations smoother.

Microsoft’s hardware acceleration tools, which rely on Direct2D and DirectWrite, are built into Windows 7, and the company is making them available to Windows Vista users (but not XP).

The frame-per-second rates in the new IE9 preview release were impressive. We saw animations, as well as some native video playback (H.264 video — IE will support open source WebM video if the user has the correct codecs installed on Windows). From the looks of the demos, IE9 is shaping up to be one fast browser. It easily smoked Firefox and fared quite well against Chrome. Microsoft’s demos don’t contain any vendor-specific HTML code and they don’t block other browsers, so you can run your own tests in several different browsers. Microsoft is using vendor-specific prefixes on its CSS 3 demos, however.

It’s admirable that Internet Explorer is supporting so much of HTML5 in the next release (“We’re all in on HTML5,” Mauceri says) but Microsoft is taking their level of commitment up a whole extra notch by building a hardware-accelerated browser that can access the GPU for native animations and native media playback.

“Canvas, audio and video are the perfect match for hardware acceleration,” says Mauceri.

It’s a growing trend. Mozilla is adding hardware acceleration to Firefox 4, and Google is building it into Chrome.

Apple’s Safari browser already uses hardware acceleration for some animations, but Microsoft is confident the new IE9 still performs better. Earlier this month, Brandon LeBlanc from the IE team posted a video of Safari 5 and IE9 running side by side. The video shows IE outperforming Safari.

A bonus for designers — the new IE9 includes support for the new Web Open Font Format (WOFF) for displaying fancy fonts on webpages.

See Also:

• New IE9 Preview Features More Speed, Standards Support
• Microsoft to Double Down on HTML5 With Internet Explorer 9
• On Web Video Support, Safari Now Stands Alone

HTML5′s <audio> tag gives you a way to embed audio files directly into a web page without requiring a plug-in. But the audio element could do a lot more than just offer Flash-free inline audio players on your favorite MP3 blogs.

The audio player element could end up fueling a whole new class of web applications — online audio editing suites. Some online audio editors written in Flash already exist, and people are using them to creative ends. But we’re just now starting to see truly amazing audio editors, synthesizers, visualizations and musical creation tools running in the browser without the need for Flash.

To see what it’s possible to do with the HTML5 audio element and some accompanying JavaScript, David Humphrey, Lead of Mozilla Education as the Mozilla Foundation, has been experimenting with audio in Firefox. To cap off his series of experiments Humphrey recently showcased a number of vary impressive Firefox interactive audio experiments on the Mozilla Hacks blog.

The videos (more of which can be seen on the Mozilla blog) highlight possible future webapps: collaborative music creation using multiple browsers, touch-screen audio interfaces, real-time audio analysis software, online mixing boards, beat detection scripts and even an online clone of Brian Eno’s Bloom iPhone app.

The best part about these demos is that, as Humphrey’s says, “this is real code, running in a real browser, and it’s all being done in HTML5 and JavaScript.” Of course the main caveat is that, for some of them to work, you’ll need a patched version of the Firefox development trunk.

The reason is that some of experiments rely on non-standard APIs. In other words, much of what’s happening in these experiments hasn’t been blessed by the W3C just yet. But plenty of what we use on the web right now — XMLHttpRequest anyone? — started out exactly the same way. Technology like this ultimately succeeds only if browser vendors and web developers work together to push it forward.

Thinking you’d really like to see an online version of ProTools? Well, according to Humphrey, “the web is fast enough to do real-time audio processing now, powerful enough and expressive enough to create music.” All that remains is for someone to build it.

If you’d like to experiment with Firefox and audio, have a look at the Mozilla developer documents using audio and video in Firefox.

An example of audio filtering tools:

Amazing, real-time analysis of audio with synchronized 3D graphics:

Photo: Kraftwerk by Andreas Hagstrom, via Wikimedia, CC

See Also:

• A Brave New Web Will Be Here Soon, But Browsers Must Improve
• Use Google for Text-to-Speech Translations in the Browser
• Embed Audio and Video in HTML 5 Pages
• Tim Berners-Lee Sees Promise, Challenges in HTML5