HTML5 Guidelines for Web Developers

102 Chapter 4—Video and Audio

To gain a better understanding of the audio player’s structure and functionality,

look at the HTML, JavaScript, and CSS source code. You can find them online

at these URLs:

z http://html5.komplett.cc/code/chap_video/js_audioPlayer_en.html

z http://html5.komplett.cc/code/chap_video/js_audioPlayer.js

z http://html5.komplett.cc/code/chap_video/js_audioPlayer.css

Back to our example. With canPlay()and pbStatus.keepPlaying, we now have

control of the situation if the track is ready to play. But how do we manage

switching from one track to the next? As mentioned earlier, there are several op-

tions for this: We can choose via the menu, click the Skip back and Skip forward

buttons, or let the audio player do it automatically at the end of a track as a result

of the settings for the Loop and Shuffle buttons. All of these options have one

thing in common: They need to load a new track, and that is done via the method

loadTrack():

var loadTrack = function(idx) {

audio.src = 'music/'+tracks.options[idx].value;

audio.load();

};

Two details need explaining:

1. What is hiding behind the argument idx? Hiding behind idx is the index
   of the track to be loaded from the pull-down menu in the variable tracks,
   from which we can extract file names.


2. What does the call audio.load() do? As you may have guessed, it starts
   loading the new track, which can be played as soon as it has reached the
   status canplay.

To keep things simple, we use only Ogg Vorbis audio files in our example. If we

wanted to offer several versions, we would first need to find the suitable format

via the method canPlayType() and then load it. Try to add this function to the

script when you have reached the end of this chapter!

NOTE

NOTE