Video und Audio - HTML5 - page 114

Aufgerufen wird loadTrack() von verschiedenen Seiten. Zuerst einmal beim di-
rekten Wechseln im Menü über den onchange -Event-Handler changeTrack(this) :

changeTrack = function(ctrl) {
loadTrack(ctrl.options.selectedIndex);
};

Dann natürlich auch von den Z URÜCK -Buttons, deren onclick -Event-

Handler jeweils die Callback-Funktion advanceTrack(n) aufrufen und ihr im
Argument n sowohl die Schrittweite als auch die gewünschte Richtung über
das Vorzeichen übergeben. Die Schrittweite ist in beiden Fällen gleich, weshalb
sich -1 für zurück und 1 für vor ergibt.
advanceTrack = function(n) {
var idx = tracks.options.selectedIndex + n;
if (idx < 0) {
idx = idx + tracks.options.length;
}
if (idx > tracks.options.length-1) {
idx = idx - tracks.options.length;
}
tracks.options.selectedIndex = idx;
loadTrack(idx);
};

V OR - und

Der Algorithmus zum Ermitteln des neuen Tracks ist einfach und besteht aus
zwei Phasen. Zuerst addieren wir n zum Index des selektierten Tracks und fan-
gen dann zwei dadurch möglicherweise entstandene Spezialfälle ab: Befinden
wir uns aktuell beim ersten Track und klicken dann auf Z URÜCK , wird der Index

negativ, und wir müssen dementsprechend beim letzten Track weiterspielen.
Befinden wir uns beim letzten Track und klicken wir auf V ORWÄRTS , passiert ähn-

lich Unerwünschtes, womit der erste Track als neuer Track zu wählen ist.

Der Vorteil der Methode advanceTrack() ist, dass sie auch bei den beiden letz-
ten Features einsetzbar ist - beim Loopen am Ende aller Tracks und beim zu-
fälligen Auswählen eines neuen Tracks. Zuvor müssen wir uns allerdings noch
kurz mit der Funktionsweise der beiden Buttons beschäftigen, die inaktiv und
aktiv signalisieren. Das Wechseln zwischen den beiden Modi erfolgt jeweils
über onclick -Event-Handler, die das Callback toggleOnOff(node) aufrufen und
ihm den jeweiligen Button im Argument node übergeben:
toggleOnOff = function(node) {
var cls = node.getAttribute("class");
node.setAttribute("class",