Information Technology Reference
In-Depth Information
Damit setzen wir die Statusvariable
pbStatus.keepPlaying
bei jedem Klick ab-
wechselnd auf
true
beziehungsweise
false
und können in
canPlay()
die richti-
ge Entscheidung treffen.
HINWEIS
Um den Aufbau und die Funktionalität des Audio-Players zu verstehen, sind
wieder die Quelltexte des HTML-, des JavaScript- und des CSS-Codes hilfreich.
Sie finden sie im Netz unter folgenden URLs:
http://html5.komplett.cc/code/chap_video/js_audioPlayer.html
»
http://html5.komplett.cc/code/chap_video/js_audioPlayer.js
»
http://html5.komplett.cc/code/chap_video/js_audioPlayer.css
»
Zurück zum Beispiel. Mit
canPlay()
und
pbStatus.keepPlaying
haben wir also
die Situation
Der Track ist spielbereit
im Griff. Wie erfolgt nun aber konkret der
Wechsel von einem Track zum anderen? Dafür gibt es wie bereits gesagt meh-
rere Möglichkeiten - durch Auswahl im Menü, über die Schaltflächen
V
OR
und
Z
URÜCK
,
aber auch automatisch am Ende eines Tracks als Folge der Settings
unserer Loop- und Shuffle-Buttons. Allen gemeinsam ist die Notwendigkeit,
einen neuen Track zu laden, und das geschieht in der Methode
loadTrack()
:
var loadTrack = function(idx) {
audio.src = 'music/'+tracks.options[idx].value;
audio.load();
};
Zwei Dinge müssen wir hier erklären:
1. Was versteckt sich im Argument
idx
?
Die Antwort: Der Index des zu ladenden Tracks des Pulldown-Menüs in der
Variablen
tracks
, über den wir den Filenamen extrahieren können.
2. Was bewirkt der Aufruf
audio.load()
?
Die Antwort: Wie zu erwarten startet er den Ladevorgang des neuen Tracks,
der, sobald der Status
canplay
erreicht ist, abgespielt werden kann.
HINWEIS
Der Einfachheit halber verwendet dieses Beispiel nur Ogg-Vorbis-Audio-Datei-
en. Würde man mehrere Versionen anbieten wollen, müsste über die Methode
canPlayType()
zuerst das passende Format gefunden und danach geladen wer-
den. Versuchen Sie am Ende dieses Kapitels, das Script um diese Funktionalität
zu erweitern!
