104 Chapter 4—Video and Audio
As the first line of the function indicates, the status is determined by the button
element’s class attribute, defining the appearance via CSS. The formats for on
and off can be found in the stylesheet js_audioPlayer.css:.off {
opacity: 0.2;
}
.on {
opacity: 1.0;
}Additionally, the current status of the relevant button is specified in the sta-
tus variable pbStatus[node.id] where the node.id indicates loop or shuffle and
therefore pbStatus.loop or pbStatus.shuffle is assigned on or off. The correct
moment for reacting to this status is always at the end of a track. Now the call-
back function continueOrStop() takes effect:continueOrStop = function() {
if (pbStatus.shuffle == 'on') {
advanceTrack(
Math.round(Math.random()*tracks.options.length)
);
}
else if (tracks.options.selectedIndex ==
tracks.options.length-1) {
if (pbStatus.loop == 'on') {
advanceTrack(1);
}
else {
pbStatus.keepPlaying = false;
}
}
else {
advanceTrack(1);
}
};If we are in shuffle mode, rounding the result of Math.random(), multiplied by the
number of all tracks, generates a random number between 0 and the total number
of tracks. We then advance by this value in advanceTrack(), and it does not matter
by how much we overshoot the target: If we are, for example, in the second-last
track and want to skip forward five positions, the algorithm in advanceTrack()
ensures that the fourth item on the menu is played.
The question “To loop or not to loop?” only ever arises in the last track. If the
corresponding button is set to on mode, we start again from the beginning with
advanceTrack(1); if it is in off mode, we stop here and set pbStatus.keepPlaying
to false. In all other cases we simply go to the next track and start playing it.