HTML5, 20 Lessons to Successful Web Development (2015)

PART III Advanced HTML5

LESSON 18 Playing Audio

To view the accompanying video for this lesson, please visit mhprofessional.com/nixonhtml5/.

In this section of the course, I introduce two of the most popular additions to HTML5, the <audio> and <video> tags. In fact, they are probably going to be even more used than the <canvas> tag due to the ability to play media directly within the browser, without the need for an external plug-in such as the Flash Player.

So in this lesson I’ll show you how easy it is to add HTML5 audio to your pages, which I think you’ll find is a remarkably easy thing to do, as long as the browser is a recent one.

As you work through this lesson, please remember that the technology is still young and the file formats supported are constantly evolving (and vary by browser for patent reasons), but the following explains all you need to know to embed audio using HTML5.

Flash is a programming environment best suited for creating animations and games, which has mostly been adopted for playing video. But it is likely that HTML will supersede it, partly due to Apple not including it by default on new Macs and banning it from iOS devices, and also because the <canvas> tag provides almost everything a programmer previously would have needed Flash for.

Understanding Codecs

The term codec stands for enCOder/DECoder and describes the functionality provided by software that encodes and decodes media such as audio and video. In HTML5 there are currently a number of different sets of codecs available, depending on the browser used.

Here are the codecs currently in use by the HTML5 <audio> tag (and also when audio is attached to HTML5 video):

• AAC This audio codec, which stands for Advanced Audio Coding, is the one used by Apple’s iTunes store. It was originally proprietary, patented technology, but has since been standardized as part of the MPEG-2 and MPEG-4 specifications, and is supported by Apple, Google, and Microsoft.

• MP3 This audio codec, which stands for MPEG Audio Layer 3, has been available for many years and the term is often (incorrectly) used to refer to any type of digital audio. It’s an open proprietary format (but subject to patents in some countries) that is supported by Apple, Google, and Microsoft.

• PCM This audio codec, which stands for Pulse Coded Modulation, stores the full data as encoded by an analog to digital converter, and is the format used for storing data on audio CDs. Due to not using compression, it is called a lossless codec, and its files are generally many times larger than AAC or MP3 files. It is supported by Apple, Mozilla, and Opera.

• Vorbis Sometimes referred to as Ogg Vorbis, because it generally uses the .ogg file extension, this audio codec is unencumbered by patents and free of royalty payments. It is supported by Google Chrome, Mozilla Firefox, and Opera.

The following list details the major operating systems and browsers, along with the audio types they support by default:

• Apple iOS AAC, MP3, PCM

• Apple Safari AAC, MP3, PCM

• Google Android 2.3+ AAC, MP3, Vorbis

• Google Chrome AAC, MP3, Vorbis

• Internet Explorer AAC, MP3

• Mozilla Firefox MP3, PCM, Vorbis

• Opera PCM, Vorbis

If you study this list, you’ll see that none of these codecs are shared by all browsers and platforms, which is rather inconvenient. The problem occurs particularly because some browsers choose to not employ the licensable codecs.

Apple Safari for Windows requires the Apple QuickTime media player to be installed in order for HTML5 audio and video to play, so you may wish to use JavaScript browser detection software to alert your Windows Safari users of this, particularly since the only error they may otherwise get is any message you include inside the <audio> tags.

The <audio> and <source> Tags

However, there’s a simple (if inconvenient) solution, which is to record your content using multiple codecs and then list them all within <audio> and </audio> tags, as in the following example. The result of running this code in all the main browsers can be seen in Figure 18-1:

FIGURE 18-1 How the five main browsers display HTML5 audio

In the preceding example, three types of audio are made available, but nowadays you generally only need to encode in two formats: OGG, and either AAC or MP3 to ensure you cover all the bases.

Perform an Internet search to find suitable programs to create the file types you need—there are plenty of them, both paid and free.

The <audio> and <source> Tag Attributes

In the preceding example you may have noticed that I applied an attribute with the name controls to the <audio> tag. This had the effect of causing a set of controls to appear, as displayed in Figure 18-1. If that attribute is omitted, then the controls will not display (and you’d either have to use another attribute called autostart or some JavaScript to make the audio play).

Here’s a list of audio attributes supported by HTML5:

• autoplay Causes the audio to commence playing as soon as it is ready.

• controls Causes the Control Panel to be displayed.

• loop Sets the audio to play over and over.

• preload Hints at how much buffering (or preloading) to use to provide the best user experience.

• src Specifies the source location of an audio file.

• type Specifies the codec used in creating the audio.

By selecting the attributes you require and encoding audio in the right formats, you can ensure that it will play on all HTML5-compatible browsers, and you’ll never have to worry about loading in a Flash or other audio player again, unless you intend to also support older browsers, as described in the following section.

Supporting Older Browsers

Older browsers that do not recognize the <audio> tag can still play audio as long as they allow the embedding of an object that can play audio, such as a Flash program file. Assuming you have access to a Flash player called audio.swf (there is one in the examples.zip file for this course), you can use code such as the following to do this:

On a non-HTML5 audio-enabled browser, the code within the <object> and </object> tags will load in the Flash program file audio.swf, and pass it the MP3 file audio.mp3, which can then be played by selecting the Play button. Figure 18-2 shows what the player looks like—not bad compared to the HTML5 ones, so it’s a pretty good fallback.

FIGURE 18-2 The fallback Flash audio player

Summary

You now have all the tools you need in order to play audio in your web pages, whether or not the browser supports HTML5 (but as long as it at least supports Flash). In the next lesson I’ll show you how to do the same with video.

Self-Test Questions

Test how much you have learned in this lesson with these questions. If you don’t know an answer, go back and reread the relevant section until your knowledge is complete. You can find the answers in the appendix.

1. Which HTML5 tag embeds audio in a document?

2. Name the four types of audio format supported by HTML5 browsers.

3. Which two audio formats used together will ensure that your audio will play on all major browsers and platforms?

4. What is the purpose of the <source> tag?

5. Which two attributes does the <source> tag require?

6. Which attribute makes audio play on page load?

7. How can you control whether or not the audio controls are displayed?

8. How can you set a piece of audio to play over and over?

9. How can you cause audio to begin loading even before the user selects Play?

10. How can you support older browsers that do not recognize HTML5 audio?