JQuery Kochbuch (German Edition)

Titel: JQuery Kochbuch (German Edition) Kostenlos Bücher Online Lesen
Autoren: jQuery Community Experts

Vom Netzwerk:

ui-icon-play">

    Mit ein paar CSS-Regeln bekommen wir einen Button, der sowohl zum Pausieren als auch zum Abspielen dient. Durch den eben angeführten CSS-Code wird immer nur ein Symbol – Abspielen oder Pause – gleichzeitig sichtbar sein, und zwar abhängig davon, ob unser
div.mplayer
die Klasse
paused
besitzt. Der HTML-Code ermöglicht es einem Designer aber auch, beide Symbole gleichzeitig anzuzeigen – vielleicht abhängig davon, ob ein Lied abgespielt wird, mit verschiedenen Farbe oder unterschiedlicher Opazität.
    Hier der JavaScript-Code:
$('.mplayer .playpause').click(function() {
     var player = $(this).parents('.mplayer');
     if (player.is('.paused')) {
     $('.mplayer').removeClass('paused');
     audio.play();
     } else {
     $('.mplayer').addClass('paused');
     audio.pause();
     }
     return false;
})
.hover(function() { $(this).addClass('ui-state-hover'); },
     function() { $(this).removeClass('ui-state-hover'); })
.focus(function() { $(this).addClass('ui-state-focus'); })
.blur(function() { $(this).removeClass('ui-state-focus'); });
$('.mplayer').addClass('paused');
    Unser Button benötigt JavaScript für folgende Aktionen:
    Aufruf der Funktion
audio.play()
oder
audio.pause()
– je nachdem, ob die Klasse
paused
beim Klicken für den
div.mplayer
vorhanden ist.
Umschalten der Klasse
paused
für den
.mplayer
.
Reagieren auf die Maus- und Tastatur-Events
focus
,
hover
und
blur
. Hier wäre ein Button-Plugin praktisch (aktuell wird gerade eines gebaut), aber für einen einfachen Button mit einem Symbol brauchen wir zum Glück nicht zuviel Code.
    Vergessen Sie nicht das
return false;
, da es sich bei unserm Button um ein

mit einer href
#
handelt.
    Mit dem geladenen jQuery, jQuery UI und dem UI Lightness Theme zeigt Figure 14-1 , wie unser Musik-Player nur mit dem Play/Pause-Button aussieht.
    Figure 14-1. Play- und Pause-Button
    Wenn Sie auf den Play-Button klicken, sollte er zu einem Pause-Button werden. Klicken Sie ihn erneut an, dann sollte er zurückwechseln. Achten Sie auch auf den Hover-Effekt und einen visuellen Hinweis, wenn Sie per Tab-Taste zum Button (und auch wieder weg) springen. In einem Browser, der das
audio
-Element unterstützt, dessen Attribut
src
auch noch auf eine Musikdatei verweist, sollten Sie beim Klick auf Play sogar etwas hören.
    Label für die aktuelle Position und die Länge des Liedes
    Im nächsten Schritt fügen wir zwei Label hinzu, die die aktuelle Position im Lied und die gesamte Laufzeit des Liedes anzeigen. Beides ist einfach umzusetzen.
    Hier der CSS-Code:
.mplayer .currenttime { position: absolute; top: 0.6em; left: 2.2em;
     width: 3em; text-align: center; background: none; border: none; }
.mplayer .duration { position: absolute; top: 0.6em; right: 2.2em;
     width: 3em; text-align: center; background: none; border: none; }
    Hier der HTML-Code:

    Und hier der JavaScript-Code:
function minAndSec(sec) {
     sec = parseInt(sec);
     return Math.floor(sec / 60) + ":" + (sec % 60 < 10 ? '0' : '') +
Math.floor(sec % 60);
}
$('.mplayer .currenttime').text(minAndSec(audio.currentTime));
$('.mplayer .duration').text(minAndSec(secondsTotal));

$audio
     .bind('timeupdate', function(event) {
     $('.mplayer .currenttime').text(minAndSec(audio.currentTime));
     });
    Wir haben die aktuelle Position nach links und die Gesamtzeit nach rechts gesetzt. Damit haben wir im Raum dazwischen Platz für den Fortschrittsbalken (siehe Figure 14-2 ). Wir wollen, dass die aktuelle Position immer anzeigt, wo wir uns gerade im Lied befinden, daher binden wir sie an das Event
timeupdate
des Audio-Elements. Das Event selbst gibt uns die
currentTime
nicht. Dafür holen wir uns die Eigenschaft
audio.currentTime
, die wir mit einer kleinen Funktion formatieren, um aus den vom Audio-Player angegebenen Sekunden auf Minuten:Sekunden zu kommen.
    Figure 14-2. Aktuelle Position und Gesamtzeit
    Slider für die Position im Lied
    Jetzt kommen wir langsam voran. Als nächstes ist nun der Slider für die aktuelle Position dran. Er besteht aus einem einfachen

, aber wir werden ihn mit einer Möglichkeit