The HTML <audio> tag is a relative newcomer amongst the HTML tags we use regularly. It was introduced to help correct what seemed to many, myself included, like a major oversight of the modern web: native audio support by browsers. A wide variety of image formats have been available via the <img> tag since soon after HTML was initially developed, but digital audio and video were initially too heavy to be used in HTML pages intended for the public. However, today we finally have both an <audio> tag and a <video> tag. Problem solved, right? Nope. Unfortunately, there are still a number of bugs to work out, mostly with browser interoperability. The root of this issue is a lack of a standard file format.
But, I’m a modern web developer. I’m not going to use some Flash shiv to get my page playing audio! It took some troubleshooting but here’s how I did it:
First of all, it’s important to know a bit about how the <audio> tag works. It can either stand alone or act as a container. A standalone audio tag would look like this and appear familiar to any web developer:
<audio src="bach_brandenburg_5-1.mp3" controls preload="auto" autobuffer></audio>
You’ll recognize the “src” attribute, of course. The “controls” attribute tells the browser whether it should render controls for the audio element or if that will be handled by the page (i.e. Javascript). The “preload” attribute set to auto tells the browser to automatically preload however much of the audio file it feels is appropriate. “Autobuffer” does the same thing as ‘preload=”auto”‘ but it has been deprecated in favor of preload.
The above tag will show controls for an audio file, buffer it, and allow it to be played. If only it were that easy. This will only work in IE 9+, Chrome 6+, and Safari 5+. In Firefox, Opera (although this may change with the switch to Webkit), or any older browser it will silently fail.
The problem is that neither Firefox nor Opera support MP3 as a file format. In fact, there is currently no single file format which can be played natively by every modern browser. IE, Chrome, and Safari can handle MP3, Chrome, Firefox, Safari, and Opera can handle WAV (but do you really want to use WAV?), and Chrome, Firefox, and Opera can handle OGG. So you’ll need both an MP3 and an OGG copy of every audio file you want to use. I used media.io to convert my MP3s to OGGs.
You might think we’re going to get into Javascript browser sniffing here so that we can serve the correct file but, thankfully, the solution is simpler than that. Here’s the final code I ended up using:
<audio controls preload="auto" autobuffer>
<source src="bach_brandenburg_5-1.mp3" />
<source src="bach_brandenburg_5-1.ogg" />
Unfortunately your browser does not support our audio formats.
</audio>
It turns out that the <audio> tag can be the container for multiple <source> tags each of which can define a different format. The great thing here is that so far in testing, all the browsers I’ve used have simply ignored the formats they couldn’t read and played the one they could. The text is a fallback if the browser fails to render the audio controls (old browsers, mostly).
This worked for me, although the site I used it on doesn’t rely heavily on the audio being available so we were fine with the text fallback, however, if audio is a critical part of what you do you’ll likely need to look into either a Javascript or Flash or hybrid solution. For me this solution was perfect as <audio> support is only getting better.
