Nov 13th, 2010
Now Hear This!
With all the talk about Flash versus HTML5 you might be forgiven for thinking that HTML5 is just about video. It’s not, of course. HTML5 is a major extension of HTML in many areas including media.
Today, I’d like to explore HTML5 audio, which is similar to HTML5 video in many respects, but fundamentally different in others. For starters, a video element is essentially just a TV set embedded in a webpage whereas audio can serve multiple purposes.
- Sound effects. A button can make a sound when it’s clicked. How about a swoosh sound when a division is toggled open or closed?
- Alerts and notifications. A little bell can sound when an AJAX request completes and updates a page section. Or, an audio “Uh Oh!” can play when you enter a malformed email address into a input field.
- Background sounds. Some web pages can benefit from background music. But say you have a photo gallery of birds. Wouldn’t it be nice to be able to click one and hear it tweet?
- Spoken content. Yes, we have podcasts, but we also need something simpler such as pronunciations of foreign words and phrases, or a click-to-have-this-post-read-to-you feature so you can go off and browse other webpages while I continue to read this one to you.
S i l e n c e.
Yo Dawg, I can’t hear your website!
This isn’t as dumb a statement as it first, um, sounds. Web developers have shied away from including sound in webpages because of several difficulties:
- Confusion – There are codecs and there are file formats. A codec is a method of encoding audio data. A file format is a container for the codec and optional metadata, such as a song title. Some file formats can accommodate multiple codecs; other formats are codec specific. For simplicity, we can narrow this discussion to the most popular file formats/codecs for the Web. These are:
- wav – An uncompressed format. A wav file with 30 seconds of silence is the same size (megabytes) as a file with 30 seconds of symphonic music.
- mp3 – A popular format for music that uses a lossy compression format resulting in file sizes typically 1/10 the size of a wav file with the same audio content.
- ogg – An open-source alternative to mp3 that also uses a lossy compression format.
- Cross-browser incompatibility – Unlike images, where all major browsers support the three major file types—gif, jpg and png—all browsers do not support all audio formats. For instance: mp3 is a proprietary format and its decoding software cannot be included in GPL-licensed, open-source applications such as the Mozilla Foundation’s Firefox browser. Here’s a table showing which formats are supported by the current versions of the major web browsers:
IE Firefox Safari Chrome Opera wav NO YES YES NO NO mp3 NO* NO YES YES YES ogg NO YES NO YES NO
(* IE8 does not recognize the audio element at all. The IE9 beta works only with mp3 files. )
- Insufficient processing power – For the first time visitor to a page, it can take several seconds for an older or overloaded browser to load the player code, download, decode and play a audio file. This pretty much nixes using sound for mouseover effects, even simple click sounds for navigation buttons.
YouTube made Web video workable. No such service existed to popularize the use of audio in webpages. On the contrary, Napster.com and iTunes focused attention on downloadable music applications. Wouldn’t it be great if there was an easy way to incorporate sounds on a webpage for other purposes. Good News! There is. All major browsers now support basic HTML5 audio with the notable exception of Internet Explorer.
The HTML5 Audio Solution
<audio src="url" autoplay loop> Aw, snap. Your browser doesn't support HTML5 audio! </audio>
The above would be perfect for playing background music on a webpage. it could be placed anywhere in the body of the document—heard but not seen. For creating a controllable audio player, the controls attribute can be added to the opening tag.
<audio src="url" controls> <a href="url">Download the audio file</a> </audio>
Which, depending on your browser will create a player like one of these:*
|IE||Download the audio file|
(* Just pictures of the controls in different browsers. They don’t work here; neither does the link.)
Unfortunately, because of the differing support among browsers for the three file types, this approach won’t work in all browsers. That means having at least mp3 and ogg audio file versions and using browser detection to figure out which to load.
But wait. There’s an alternate form of the audio element that takes a different approach: try one format and, if it doesn’t work, try another. You still need at least two files but the syntax is much simpler.
<audio id="bgSound" loop> <source src="audio/bgSound.mp3" type="audio/mp3" /> <source src="audio/bgSound.ogg" type="audio/ogg" /> <-- lnsert fallback Flash Player code here --"> </audio>
As an alternative, use jQuery in the document head to call the play method at document ready time (when all the HTML is parsed but images may still be loading.)
To play a sound effect when the user’s mouse is over a link, remove the loop attribute from the audio tag and add preload, then use the onmouseover attribute in the link. You can get the DOM object and play it in one move:
Or, to assign a sound to a button like the one at the bottom of this post
<audio id="ella" preload> <source src="audio/swonderful.mp3" type="audio/mpeg" /> <source src="audio/swonderful.ogg" type="audio/ogg" /> </audio> <button onclick="document.getElementById('ella').play()"> I like it! </button>
What do you think of HTML Audio?