Fotos, Grafiken, Videos: Das Web ist ein Universum der Bilder. Und weil der Mensch ein Augentier ist, bieten selbst Audioplayer optische Opulenz: Covers, Playlists, Animationen und Regler ohne Ende. Hörstücke aber sind Kino im Kopf, und das Ohr wird nur ungern vom Auge gestört. Daher: Bildschirm frei für meinen minimalen Button Player.
Der Player besteht aus einem einzigen Knopf, der zwischen «Play» und «Pause» hin und her wechselt. Der im Uhrzeigersinn rotierende äussere Kreis markiert die aktuelle Position, der gegenläufige innere Kreiszeiger gibt die verbleibenden Minuten an; ein Lang- oder Rechtsklick schliesslich stoppt die Wiedergabe und spult zurück. Javascript und CSS 3 bieten alles, was es braucht: Mehr Player braucht kein Mensch.
Einen funktionierenden HTML-5-Audioplayer zu schaffen, ist grundsätzlich denkbar einfach: Drei mittels CSS beliebig gestaltbare <div>- oder <button>-Tags, in Inline-Javascript gehaltene Anweisungen und der standardkonforme <audio>-Tag reichen aus.
<div onclick="document.getElementById('myAudioname').play()">▶</div>
<div onclick="document.getElementById('myAudioname').pause()">❙❙</div>
<div onclick="document.getElementById('myAudioname').pause(); document.getElementById('myAudioname').currentTime=0">◼</div>
<audio hidden id="myAudioname">
<source src="pathFilename.ogg" type="audio/ogg">
<source src="pathFilename.mp3" type="audio/mpeg">
</audio>
Ein fortgeschrittener Player aber braucht mehr Funktionen und lässt sich zugleich noch stärker reduzieren. Der hier vorgestellte Button Player soll in Sachen Funktionalität, Grafikdesign, Programmierung und Audioformate folgenden Anforderungen entsprechen:
- Funktionalität: Der Button Player bietet alle erwarteten Playerfunktionen und läuft in allen Desktop- und mobilen Browsern. Seine Bedienung erschliesst sich intuitiv.
- Grafikdesign: Der Button Player kommt gänzlich ohne Bilder, Zahlen oder Text aus. Seine Gestaltung beruht auf flat bzw. minimal design, seine Oberfläche ist Retina-fähig. Er lässt sich mit wenig Aufwand in ein bestehendes Design integrieren.
- Programmierung: Der Button Player ist in HTML 5 geschrieben. Sein minimaler Code ist robust und einfach verständlich.
- Audioformate: Der Button Player spielt Audios standardkonform in den Formaten mp3 (lizenzhaltig) und ogg (lizenzfrei) ab.
Als erstes müssen das Stylesheet und das Skript des Button Players in die Webseite bzw. das Template eingefügt werden: button-player.css in den <head>-Abschnitt, button-player.js vor den schliessenden </body>-Tag. Der HTML-Code für den Player selbst ist so einfach wie möglich gehalten. Angepasst werden müssen nur die CSS-Klasse des <audio>-Tags, die einen eindeutigen Audionamen enthalten muss, sowie Pfad und Dateinamen der Audiofiles in den Formaten ogg und mp3 (jeweils dunkel markiert). Das Skript des Button Players importiert den Audionamen, ermittelt die Länge des auszuspielenden Stücks und löst anschliessend die Startanimation aus.
<div id="buttonPlayer">
<audio hidden id="audio" class="myAudioname">
<source src="pathFilename.ogg" type="audio/ogg">
<source src="pathFilename.mp3" type="audio/mpeg">
</audio>
<div id="background" class="base color"></div>
<div id="hand" class="base line"></div>
<div id="icon" class="base play"></div>
</div>
Der Player setzt sich aus dem <audio>-Tag und drei separaten, übereinander liegenden Grafikebenen zusammen, die von einem über die CSS-Klasse .buttonPlayer positionierbaren <div> zusammengefasst werden. Form-, Farbgebung und Positionierung erfolgen über das Stylesheet button-player.css sowie über die von transparent nach teiltransparentem Schwarz verlaufende Zeigergrafik time.png. Letztere ist (ebenso wie die beiden Icon-Grafiken play.png und pause.png) 200 mal 200 Pixel gross und wird auf 25 bzw. 35 Prozent skaliert; das Player-Design ist damit auch an hoch auflösende Retina-Displays angepasst. Änderungen der grafischen Erscheinung des Button Players lassen sich durch eine einfache Anpassung der CSS-Eigenschaft background (Klasse .color) vornehmen.
Der Player zeigt im Ruhezustand das «Play»-Symbol an. Nach dem Start erscheint, je nach Zustand, entweder das «Pause»- oder das (dank der Javascript-Funktion iconBlink() blinkende) «Play»-Icon an. Die zugrundeliegenden Funktionen sind die beiden Javascript-Methoden des Audio-Objekts, play() und pause(). Beide werden von derselben Funktion playSound() aufgerufen, die mithilfe der Boole'schen Variablen isPlaying überprüft, ob der Player zur Zeit einen Sound abspielt oder pausiert.
if (!isPlaying) {
sound.play();
clearInterval(blink);
icon.className="base pause";
isPlaying=true;
displayPlayingTime();
}
else {
sound.pause();
blink=setInterval(iconBlink, 500);
isPlaying=false;
displayPauseTime();
}
Ein Audioplayer benötigt aber noch eine dritte Funktion, nämlich «Stop». Dafür nutzt der Button Player die Javascript-Funktion pauseStop() zwecks Unterscheidung eines einfachen Klicks von einem Langklick (bzw. Klicken und Halten). Diese Funktion wird nicht via click-, sondern vielmehr via mousedown-/mouseup- (bzw. für mobile Geräte via touchstart-/touchend-)Event ausgelöst1.
events=["mousedown","mouseup","touchstart","touchend"];
for (i=0; i<events.length; i++) {
icon.addEventListener(events[i], pauseStop, false);
}
Die Javascript-Funktion pauseStop() enthält die Variable wait mit einem Timeout. Das Skript wartet ab, ob die Funktion innerhalb von 300 Millisekunden ein zweites Mal ausgelöst wird. Falls ja, handelt es sich um einen einfachen Klick: Die Maus wird gedrückt (mousedown) und sofort wieder losgelassen (mouseup). Das Timeout wird gelöscht, und playSound() (siehe oben) wird aufgerufen, jene Funktion, die das Audio abspielt oder pausiert. Wenn die Maus aber länger als 300 Millisekunden gedrückt bleibt, handelt es sich um einen Langklick, und das Timeout löst stattdessen nach einer unmerklichen Pause die Funktion stopSound() aus (die im Kern aus der Methode pause() und einem Zurücksetzen der Eigenschaft currentTime auf den Wert Null besteht). Auf diese Weise lässt sich ein Klick von einem Gedrückthalten der Maustaste unterscheiden.
if (wait) {
playSound();
clearTimeout(wait);
wait=false;
}
else wait=setTimeout(stopSound, 300);
Weil der Button Player gleichzeitig Klick- und Touch-Events nutzt, ergibt sich in mobilen Browsern ein geringfügiges Problem. Obwohl hier ein Langklick im Grunde nur das touchstart-Event aktivieren sollte, wird bei Touch-fähigen Browsern aus Gründen der Kompatibilität mit nicht Touch-optimierten Webseiten nach 300 Millisekunden ein zusätzliches, nämlich das mousedown-Event, ausgelöst2. Bei einem Langklick würde der Button Player also zwar stoppen, aber danach gleich wieder zu «Play» wechseln. Die Methode preventDefault() am Ende der Funktion pauseStop() setzt dieses hier unerwünschte Browserverhalten ausser Kraft und überlässt das Event-Handling stattdessen vollständig dem Skript.
event.preventDefault();
return false;
Auf diese Weise lassen sich schliesslich innerhalb eines einzigen Buttons alle drei Basisfunktionen realisieren: «Play», «Pause» und «Stop».
Schliesslich benötigt der Player zwei Zeitanzeigen, eine absolute Angabe der gesamten Spielzeit sowie eine relative Positionsangabe. Erstere beantwortet die Frage, wie lange das gesamte bzw. verbleibende Audio dauert, Letztere, wo sich der virtuelle Tonkopf im Augenblick befindet.
Die absolute Zeitanzeige (innerer Kreis) besteht aus einem <div> mit der ID hand («Zeiger») und einer Hintergrundgrafik mit einer als Zeiger dienenden, nach oben weisenden Verlaufskante. Die Animation beim Laden der Seite dreht den inneren Zeiger an die Stelle, die der Minutenzeiger auf einer Uhr einnehmen würde: bei einem 15-Minuten-Beitrag nach rechts, bei einem 30-Minuten-Hörspiel nach unten. Ein Klick auf «Play» lässt den Zeiger mithilfe der CSS-Eigenschaften transform und (mit der Audioobjekteigenschaft .duration in Spielminuten umgerechneten) transitionDuration kontinuierlich, also linear, gegen den Uhrzeigersinn wandern; ist das Stück zu Ende, zeigt er ganz nach oben.
Die relative Zeitanzeige (äusserer Kreis) besteht aus einem <div> mit der ID background und einer etwas helleren Hintergrundgrafik. Ein Klick auf «Play» lässt den äusseren Zeiger mithilfe der genannten CSS-Eigenschaften einmal im Uhrzeigersinn um seine Achse wandern. Ist das Audio zu einem Viertel abgespielt, steht dieser Zeiger ganz rechts, bei Halbzeit ganz unten. Die Funktion «Pause» behält die aktuellen Rotationen bei und setzt die Eigenschaft transitionDuration zurück, um so die Anzeige einzufrieren. Ein erneuter Klick auf «Play» berechnet die verbleibende Spielzeit und setzt die Zeigeranimationen, ausgehend von ihren aktuellen Positionen, wieder in Gang.
Ein via «Play» bzw. «Unpause» gesetztes, in die Variable resetPlayback gespeichertes Timeout stoppt das Playback nach Ablauf der Spielzeit, und die Schlussanimation dreht die beiden Zeitanzeigen – genauso wie beim Abbruch des Playbacks durch die «Stop»-Funktion – wieder auf ihre jeweiligen Ausgangspositionen zurück.
Der Button Player (Javascript, CSS) lässt sich als zip-Paket herunterladen.
1 w3schools.com: HTML DOM Events
2 html5rocks.com: Touch And Mouse
The Chicago Seven Swing & Blues Revue: You Don't Know What Love Is (mp3, ogg). Max Ziegler ts, Jean-Luc Gassmann p, Christoph Thiel g, Cornel Sidler dr, myself b