All posts tagged ‘audio’

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.

File Under: HTML5, JavaScript, Multimedia

JavaScript Decoder Brings High-Quality Audio to the Web

HTML5′s native audio and video tools promise to eventually make it possible to create sophisticated audio and video editing apps that run in the browser. Unfortunately much of that promise has thus far been marred by a battle over audio and video codecs. Right now what works in one browser on one operating system will not necessarily work on another.

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.

I’m Feeling Moogy: Google Taps Native Web Audio for Awesome Moog Tribute

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).

File Under: HTML5, Web Standards

Microsoft Offers a Guide to Using HTML5 Audio

While the HTML5 video element gets the lion’s share of attention because of its potential to eliminate the need for Flash on popular sites like YouTube, the HTML5 audio element is equally useful. Like <video>, <audio> allows you to embed files in your page without the need for Flash or other plugin-based players.

The IEBlog recently posted a nice overview of how to use the <audio> element in your pages. Covering everything from the basics of embedding a file to more advanced topics like preloading, looping and syncing audio files; the post makes a great introduction to the world of the HTML5 <audio> tag.

As you would expect, the specifics of the tutorial target MP3 files, the primary audio codec supported in Microsoft’s IE 9 (and the coming IE 10). Firefox and others do not support MP3 out of the box, so check out this post in the MSDN library for more info on embedding multiple audio file formats in a single tag. Mark Pilgrim’s Dive Into HTML5 also has a great overview of embedding multiple files (Pilgrim’s tutorial is primarily concerned with video, but he covers audio in passing).

Also note that not everything list in the IEBlog post works in every browser, for example the autoplay value on the audio tag does not seem to work on Mobile Safari (some might consider that a feature). There’s also no mention of a fallback for older browsers that don’t support <audio> at all. Still, it’s nice to see Microsoft encouraging developers to embrace the new HTML5 audio tag.

Once you understand the basics of how the audio tag works, it’s well worth checking out pre-built solutions like MediaElement.js, which make it easy to target every web browser, including those that don’t understand the <audio> tag.

See Also:

File Under: HTML5, Multimedia

Google and Arcade Fire Get All HTML5y

The good folks at Google have published a very cool multimedia showcase for what’s possible in HTML5. Using music by Arcade Fire (the 21st century hipster equivalent of ELO), filmmaker Chris Milk has made an interactive video of sorts that spans multiple browser windows.

Eliot Van Buskirk has a full write-up, including an interview with Milk, over on Wired’s Epicenter blog.

The Wilderness Downtown,” features HTML5 native video and audio, canvas-animated birds that fly away from your mouse clicks, interactive SVG fonts, and photo panoramas from Google Maps Street View. You enter in the address of where you grew up and it pulls the images for that neighborhood. The neighborhood of my childhood home wasn’t available, so I opted for the section of Burlington, Vermont I lived in throughout college. It was creepy to see my old house in an Arcade Fire video.

Being Google-produced, the experiment works best in Google Chrome, of course. It had problems playing back properly in Firefox 4 beta.

If you have Chrome and can watch it, it really strikes a chord. It goes beyond all the HTML5 vs Flash dogma and presents what’s possible with these new technologies in a way which resonates on a level that’s more emotional and immediate than nerdy and intellectual.

So who do I talk to at Google about getting them to do one of these things for my band?

This post was updated at 2:45 PDT. The original incorrectly said it was a YouTube experiment. The site was created by the Google Chrome team, not YouTube.

See Also: