Working with HTML5 multimedia components – Part 2: Audio

In Part 1 of this three-part series on working with HTML5 multimedia components, I focused on embedding video in web pages using HTML5. Of course, most videos include audio, and if you want to embed audio files into your web pages you can  achieve this with HTML5 just as easily.

In this tutorial I cover the audio element, its attributes, and the different types of audio files that can be used with HTML5. Many of the concepts and techniques covered in Part 1 for video apply to audio as well, so if you've read Part 1 then you'll notice some similarities in Part 2. If you've not read Part 1 and you're interested in only HTML5 audio then this article has all you need to get started.

Note: You can explore some of the sample code and many of the concepts illustrated in this article by downloading and delving into the sample files.

Before HTML5, if you wanted to embed an audio file into your web page, you had to use a third-party plug-in such as Flash Player.

For example, to embed an MP3 audio file in your web page and make it available via Flash Player, you might use the following code:

Using HTML5, you can you can be more succinct:

This snippet of HTML5 code achieves the same result as the more verbose code for Flash Player: It embeds an audio file into a web page to play automatically. You can see just how much easier and neater HTML5 code can be.

I covered video codecs in Part 1 of this series, and it will come as no surprise to learn that many of the ideas carry over to audio codecs. The HTML5 specification initially had made support for the Ogg Vorbis codec mandatory, but Apple and Nokia's challenge put an end to this. Browsers today support more audio codecs than video codecs, so you have more choices when deciding what to use:

• Firefox supports Ogg Vorbis and WAV.
• Safari supports MP3, AAC, WAV, and MP4.
• Internet Explorer 9 supports MP3, AAC, and MP4.
• Opera supports Ogg Vorbis and WAV.
• Chrome supports all of the above.

To cover all browsers that support HTML5 audio, you need to serve your audio in only two different formats: Ogg Vorbis and MP3.

It's not advised to use the WAV file format as it doesn't compress very well if at all and therefore the file size can be quite large.

As you've seen, the audio element is used to embed audio files within a web page. Like the video element, it can have a number of attributes, some of which are listed in Table 1

Table 1. Attributes of the audio element

For example, with the audio element and its attributes, you can use the following code to embed an MP3 audio file that starts playing on load, has a default set of controls, and loops repeatedly:

I must point out that this example would likely be quite annoying to your users. Automatically playing a looping audio file is generally considered to be bad Internet etiquette.

As I noted earlier, you'll need to provide audio files for at least two different codecs to cover all browsers that support HTML5. As with the video element, you use the source element to accomplish this.

An audio element can contain multiple source elements, so you can provide your audio in multiple formats. Extending the previous example, you can specify both an Ogg Vorbis and MP3 source for the same audio content as follows:

When the browser parses the audio element, it will proceed through the list of source elements sequentially until it finds a file format that it can play. Once it does, it plays it and ignores any subsequent elements.

In this case, Firefox and Opera would play the Ogg file. Chrome would also play the Ogg file, even though it is also capable of playing the MP3 file. Safari and Internet Explorer 9 would play the MP3 file.

Specifying the codec

You can also specify the exact codec that was used to encode the audio file. This can help the browser decide whether it can play the content or not. It's generally a better idea to simply provide the type and let the browser decide for itself, as often you're not sure what codec was actually used.

If you want to include the codec, you can do so as follows:

Note how the codec is added to the type attribute, specifically the quotes used and the separation of the type and codec by a semicolon. As with specifying the video codec, it's not difficult to make a formatting mistake here that will render the audio unplayable. So, if you're specifying the codecs explicitly, be careful with the syntax.

Not everyone uses a browser that supports HTML5. Older versions of Internet Explorer (version 8 and below), for example, are still quite popular.

To support users who are using these browsers, you can use a third-party plug-in such as Flash Player to embed audio files, just as you would have before the arrival of HTML5 and native multimedia.

Browsers disregard what they don't understand, so your HTML5 audio and source elements will be completely ignored by older browsers such as Internet Explorer 8. For example, you might use the following code to add a link to the audio file:

Older browsers will simply display the "Download the audio file" link and ignore the rest.

To add fallback support via Flash Player (as well as the download link) you can use the following code:

Older browsers will display Flash Player and the download link, so users can choose how they want to access the audio. If a user doesn't have Flash Player installed they can still access your audio file via the download link. Note that you can use the same MP3 audio file with Flash Player, since it is fully capable of playing MP3 files.

As I noted in Part 1, HTML5 currently does not support digital rights management (DRM). As a result, if you don't want users to be able to download your audio files, then HTML5 audio is probably not the right solution for you. HTML5 exposes the links to your audio files, so they are openly available for users to access the content.

There is currently no way to prevent users from downloading HTML5 audio content, although it's possible that in the future there will be. For more information on HTML5 and DRM see the W3C's HTML FAQs on this topic. (The discussion is about HTML5 video, but the concepts apply to audio content as well.)

As you can see, it's easy to add audio to your website using HTML5. You do need to be aware that some browsers don't support HTML5, so be sure to provide a fallback mechanism to ensure all users have access to your audio content.

Also remember that any audio files that you serve via HTML5 are available for anyone to download. Therefore, if you want to prevent your files from being downloaded and shared, then HTML5 audio is not for you.

In Part 3 of this series, I cover custom controls for HTML5 multimedia elements.

You can read more about HTML5 video and its capabilities in my upcoming book, HTML5 Multimedia: Develop and Design.