JQuery Kochbuch (German Edition)

ein jQuery UI Progressbar sein. Für den Lautstärkeregler schließlich werden wir einen weiteren jQuery UI Slider nutzen. Diese Elemente stecken wir dann in einen normalen Container, so dass wir nicht nur die Widgets mit einem netten Theme versehen, sondern auch für den gesamten Player ein Theme vergeben können.
    ----
    Note
    Wir werden diesen Musikplayer nicht als wiederverwendbares Plugin erstellen, sondern einfach ein paar jQuery UI-Widgets so zusammenschrauben, dass sie für den Anwender wie eine Komponente erscheinen. Bei dem Musikplayer selbst wird es sich aber nicht um ein jQuery-Plugin oder jQuery UI-Plugin handeln. Für dieses Rezept ist er nur eine Zusammenstellung aus HTML-, JavaScript- und CSS-Code. So können wir uns darauf konzentrieren, wie wir die zugrundeliegenden jQuery UI-Plugins nutzen können, ohne uns um die zusätzliche Komplexität durch das Bauen eines neuen Plugins aus bestehenden Plugins kümmern zu müssen.
    ----
    HTML5 Audio
    Um das Ganze nicht zu kompliziert zu machen, werden wir eine minimale Untermenge der HTML5 Media Element API nutzen. Diese gibt es in einer Reihe aktueller Browser, wie zum Beispiel dem Firefox 3.5. Wir werden die API in einer Kompatibilitätsschicht implementieren, so dass auch andere Abspielmechanismen, wie der Flash Player, einfach eingesetzt werden können. Für dieses Rezept benötigen wir von unserer Audio-API die folgenden Funktionen:
    Abspielen starten oder fortsetzen (
play
)
Abspielen pausieren (
pause
)
Länge des Liedes ermitteln (
duration
)
Aktuelle Position im Lied ermitteln (
timeupdate
)
An eine bestimmte Position im Lied springen (
currentTime
)
Die Lautstärke des Liedes bestimmen, mit der es gespielt wird (
volumechange
)
Die Lautstärke ermitteln (
volume
)
    Wenn ein HTML5-
audio
-Element im Dokument vorhanden ist, ist dies der Code für die Kompatibilitätsschicht:
var $audio = $('audio'), audioEl = $audio[0];
var audio = {
     currentTime: 0,
     duration: secondsTotal,
     volume: 0.5,
     set: function(key, value) {
     this[key] = value;
     try { audioEl[key] = value; } catch(e) {}
     if (key == 'currentTime') {
     $audio.trigger('timeupdate');
     }
     if (key == 'volume') {
     $audio.trigger('volumechange');
     }
     },
     play: function() {
     audioEl.play && audioEl.play();
     },
     pause: function() {
     audioEl.pause && audioEl.pause();
     }
};
$audio.bind('timeupdate', function() {
     audio.currentTime = audioEl.currentTime;
});
audio.set('currentTime', 0);
audio.set('volume', 0.5);
    Der Musikplayer
    Lassen Sie uns die CSS-Klasse
mplayer
für unseren Musikplayer nutzen. Diese Klasse werden wir unserem Haupt-