Video und Audio - HTML5 - page 112

ganze Tracks ausgetauscht. Sowohl das Menü als auch die Vor-, Zurück-, Loop-
und Shuffle-Buttons bewirken diesen Wechsel von einem Track zum anderen,
weshalb sich die Scriptlogik etwas verkompliziert.
Beginnen wir mit dem audio -Element:
<audio src="music/bbb_01_intro.ogg"
oncanplay="canPlay()"
ontimeupdate="updateProgress()"
onended="continueOrStop()">
</audio>
Beim Laden der Seite setzen wir das src -Attribut auf den ersten Track und
definieren drei Callbacks, von denen updateProgress() schon bekannt ist - die-
se Funktion kümmert sich um das Nachführen des Sliders und die Aktualisie-
rung der Zeitanzeige (siehe Listing 4.1). Neu sind das Callback canPlay() , das
aufgerufen wird, sobald ein Track spielbereit ist, sowie continueOrStop() , das
am Ende eines Tracks entscheidet, wie es weitergehen soll. Das oncanplay -
Callback canPlay() ist recht kurz und sieht so aus:
canPlay = function() {
curPos.max = audio.duration;
if (pbStatus.keepPlaying == true) {
_play();
}
};
Offensichtlich wird mit curPos.max wie schon beim Video-Player das max -Attri-
but des Sliders angepasst, doch was hat es mit dem darauf folgenden if -Block
auf sich? Die Antwort ist einfach: Wir versuchen, den aktuellen Abspielstatus
zu berücksichtigen und nur dann weiterzuspielen, wenn der Player auch vorher
schon im Abspielmodus war.
Entscheidend dafür, ob wir nach einem Wechseln also mit dem Spielen begin-
nen, ist der Status des Play-Buttons: Haben wir erst einmal mit dem Abspielen
begonnen, muss nach jeder Track-Änderung auch wieder weitergespielt wer-
den. Befindet sich der Play-Button hingegen im Pause-Modus, wird nur ge-
wechselt. So kompliziert das klingt, so einfach ist die Umsetzung im Callback
des Play-Buttons, dem wir folgenden Code hinzufügen:
pbStatus.keepPlaying =
(pbStatus.keepPlaying == true) ? false : true;