With all the furore around the HTML5 video element, the poor audio element sits in the background wondering what it’s done wrong to receive so little attention. So in an attempt to redress the balance, I’m going to show you how you can stream audio to your website visitors without any additional plugins.

As with the video element, in the past the only method of embedding audio files into a web page was to use Flash or another third-party plugin. There simply was no other way. With the introduction of the audio element, this has changed.

Browsers and file types

There are currently three different audio file types that are supported, and (of course) the different browsers each support different formats. The table below illustrates this:

Code

So how do we actually go about adding an audio file to a web page? Well it’s quite simple really, especially if you’ve already used the video element.

Instead of using the <video> element we naturally use its brother, the <audio> element. Like the <video> element, we can use the src attribute to directly specify the audio file to play, but, as shown above, it’s more practical to use the <source> element to indicate a number of possible sources in order to cover all most browsers.

The <audio> element

The audio element takes the following attributes:

So you can easily add a WAV audio file to your website by using the following markup:

<audio src="audioFile.wav" autoplay controls></audio>

Of course, as mentioned above, this can limit your browser compatibility and it’s better to provide different audio sources using the <source> element.

The <source> element

The source element can take the following attributes:

Stacking the audio sources

Combining the <audio> and <source> elments together couldn’t be simpler, as the code below shows:

<audio controls autobuffer>
<source src="audioFile.ogg">
<source src="audioFile.mp3">
<source src="audioFile.wav">
Sorry, your browser does not support the audio element
</audio>

The code above should play the specified audio file in all of the browsers mentioned above (except for the current incarnations of Internet Explorer and Android – which will display the message indicating as much. This could be replaced with a Flash fallback of course).

Feel free to test this code for yourself.

Conclusion

So there it is in its simplest form, adding an audio file to a web page. Of course it depends on the browser the page is being viewed in, and, as usual, we’re still waiting for Internet Explorer to catch up (A beta version of IE9 is due out next month).  Nevertheless, it’s still worth using today. Just don’t set your files to autoplay!