Chapter 6
Audio the HTML5 Way

Audio on a web page can serve a number of needs: music, lectures, webcasts, and even just sound effects for some spookier or odd web sites (it’s all in the ambience).

The audio element in HTML5 is very much like the video tag, except for the obvious difference of no visuals. It is a native element, eliminating the need for a third-party player. Like the video element, the audio element can be styled with CSS (although if it is so altered as to not be recognizable as an audio player, up comes a red flag of bad design).

Another approach you can take is to not show the audio player at all! The audio element can be on a web page, but made invisible, as will be demonstrated in this chapter. Why might you want to do this? Some web site owners desire to have a type of audio, usually background music, play while viewing the page. (This is not necessarily the best choice—some people get annoyed.)

As of this writing, three audio formats are supported: Ogg (Vorbis), MP3, and WAV. Not all browsers play these file types; however, you can use the fallback technique introduced in the previous chapter so at least one version will be played.

Introducing the Audio Element

The audio element is tag-based (<audio>…</audio>). Figure 6-1 shows three audio players on one page. Each has a different look (thanks to CSS), and each is set to play a different format of the same piece of music.

Figure 6-1 Styled audio players

Code Listing 6-1 shows the three instances of the audio element used to create the players shown in the figure, with corresponding CSS in the head section of the page.

Code Listing 6-1 Using the audio tag

Note that the three audio elements in this example contain the same song (song1), but with a different format type. Depending on the browser, a page could display all three audio elements, or just one or two.

As shown in the previous chapter on the video element, the audio element can be structured to provide fallback; that is, the different format types are listed one after the other inside the opening and closing tags. If a browser can’t render the first type, it will try the second, and so on. Code Listing 6-2 demonstrates this approach.

Code Listing 6-2 Using fallback in the audio element

You might notice something peculiar in Code Listing 6-2. I have listed the Ogg version of the song twice: once with the .ogg extension and once with the .oga extension. Testing has shown some confusion (for want of a better word) on the part of some browsers on how to interpret the audio part (Vorbis) of the Ogg format. So to be on the safe side, I include both:

This means that two copies—one for each file extension—should be in the directory that the song is sourced from, as shown in Figure 6-2.

Figure 6-2 Providing two variations of the Ogg audio

NOTE

You can specify multiple file types for the fallback, but be sure all that are referenced are placed in the directory that the web page looks in for the source.

Also notice that both Code Listings 6-1 and 6-2 use the audio tag’s controls attribute, which displays play/pause and volume controls, as shown in Figure 6-3. Additionally, like the video element, the audio element has the autoplay and loop attributes.

Figure 6-3 Providing controls to stop and start the audio

Look Ma, No Audio Player!

When you don’t include the controls attribute, the audio player does not appear. The user cannot use the standard controls to start playing the audio. However, there is a way to play audio with no apparent player. All that is needed is a way to get the audio started. In the example in Code Listing 6-3, I have put such a method in place by using the load event.

Code Listing 6-3 An audio player without a controls attribute

Of note in Code Listing 6-3 are the load event and the function that is called (and, of course, the removal of the controls attribute):

Upon the page load, the playmusic() function is called, and within the function, the audio element is given the .play() method. When you open this page in your browser, the audio plays. It’s simple.

Events and Audio

As with the video tag, numerous events can be fired with the audio tag. Many are the standard set, such as click, mouse move, and focus. Some are unique to the audio element, including play, pause, volume change, and ended, to name a few.

Using Audio Events

As an example, Code Listing 6-4 shows the source for a page that uses the play, pause, and ended events. When the page loads, an image (musicstaff.jgp) is given an identifier of musicstaff. The image is set to be not visible (.visibility="hidden"). Once the player is started, the play event fires, calling a JavaScript function that makes the image visible. If the player is paused, the pause event fires, calling another JavaScript function that toggles the image visibility back to hidden. Finally when the song ends, the ended event fires and displays a “Thanks for listening” message. The message appears from the innerHTML property of a div being given the message to display.

Code Listing 6-4 Using audio element events

Let’s see this in action. Figure 6-4 shows the page when it is first rendered in the browser. The audio element is visible and not yet clicked to start playing. So, all you see is the player.

Figure 6-4 The page starts with the idle player.

When the play control is clicked, the music staff appears, as shown in Figure 6-5.

Figure 6-5 When the play control is clicked, music plays and an image is shown.

If the song is paused by clicking the pause button, the image reverts to no visibility. When pause is released, and play resumes, the image appears again. This toggling will occur as often as the play and pause controls are toggled. Finally, when the song ends, a message appears, as shown in Figure 6-6.

Figure 6-6 The “thank you” message appears when the song is finished playing.

Using Other Events with Audio

The audio element is a key new feature of HTML5, as it makes third-party players unnecessary. A subjective goal in development is to keep code consistent. The third-party solutions typically require embedding some code, referencing something external to the site, or a plug-in of some type, typically Flash Player. This is not bad per se, however, having a native audio player allows bypassing any of the overhead.

A popular aspect of third-party players has been leveraging the visual aspect of the player. This might be enough reason for some web developers to want to wait for broader support of the new core audio element until perhaps it can be styled to the hilt the way a Flash creation can be designed. But there is another alternative.

As you saw in this chapter’s example, it’s possible to have the player not appear at all by removing the controls attribute. With some planning and creative ingenuity, you could keep the player invisible, and control the audio play and pause using events attached to another item on the screen. Code Listing 6-5 provides such a scenario. The music staff image used in the previous example is now always visible. It has been given JavaScript functions attached to its click and double-click events. Click the music staff, and the song plays. Double-click the music staff, and the song pauses. No audio player appears, and yet audio is fully functional.

Code Listing 6-5 Using the audio element through events attached to other page items

With a visual element as a clue (the music staff), a person might click it for no other reason than it’s there. Perhaps an image such as a single music note will become known as the way to start playing music on a page. That would be neat!

Summary

Audio has many uses in a web presentation strategy. A lot of information can be given to visitors when all they have to do is listen. We tend to think of music as the main purpose of audio, but the spoken word is just as relevant. Certainly a recording of a company’s president talking up a new product, or a specialist in a given field (such as a veterinarian) talking a web site visitor through a sequence of steps (such as diagnosing why your dog is not eating), provides useful and pertinent information.

In this chapter we explored how to make audio happen with the native HTML5 audio element. Some codec and format issues are taken into consideration to handle the various browsers. CSS and the use of events make it possible to greatly control how the audio element appears and acts.

With the knowledge gained in the previous chapter on video and this chapter on audio, you have at your disposal the tools to add much impact on your web pages. Audio and video will continue to gain more and more “real estate” on web sites. Having a strategy to use these tools will bring new traffic and repeat visitors. And isn’t that the whole point?