Audio-Player

HTML5 bringt ein Tag mit sich, dass es ermöglicht eine Audio-Datei auf einer Website samt Player zu integrieren: audio.

Attribute

Das Tag bringt von Haus einige interessante Attribute mit.

So kann man ein Control-Panel hinzufügen, was von jedem Browser unterschiedlich dargestellt wird. Die Funktionen sind jedoch bei den Browsern die gleichen: Play, Pause, Lautstärke. Außerdem wird ein Fortschrittsbalken angezeigt, der sowohl Ladefortschritt als auch Wiedergabefortschritt anzeigt.

Im aktuellen Firefox sieht das dann so aus:

Diese Controller werden mit dem Attribut controls="controls" eingefügt.

Mit dem Attribut autoplay="autoplay" kann man das automatische Abspielen des Traks erzwingen, sobald dieser fertig geladen ist.

Einen Loop - also eine sich ständig wiederholende Schleife des Tracks - erreicht man mit dem Attribut loop="loop".

Das Attribut preload kann verschiedene Werte annehmen. Mit auto fängt das Laden des Tracks an, sobald dieser dazu bereit ist. metadata erfasst nur die Metadaten des Tracks während des Ladevorgangs der Seite. Und mit none werden keine Daten des Tracks vor dessen Start geladen.
Das Attribut erhält automatisch den Wert auto, wenn das autoplay-Attribut gesetzt ist.

Das wichtigste Attribut von audio ist allerdings src, welches die Quelle der wiederzugebenden Datei angibt.

Die Quelldatei

Anders als beim Video-Tag, gibt es beim Audio-Tag nicht so einen großen Streit um das Eingabeformat. Hierbei handelt es sich um .ogg.
Das Umwandeln einer MP3-Datei in eine OGG-Datei kann beispielsweise ein Online-Converter übernehmen.

Alles in allem ist aber dennoch ein Format-Wirrwarr auch hier vorzufinden:
Safari 4 und Chrome 3 (beide mit Webkit-Engine ausgestattet) unterstützen das MP3- und WAV-Format. Sarfari 4 spielt allerdings keine OGG-Dateien ab.

Interessant ist in diesem Zusammenhang dann das Source-Tag, mit dem man unterschiedliche Eingabeformate definieren kann.

Browsersupport

Leider unterstützen nicht alle Browser die neuen Tags. Vorallem der Internet Explorer macht - wie so oft - Probleme. Deshalb ist es wichtig, dass man sich nicht nur auf die neue Technologie verlässt, sondern einen Fallback definiert.
Dies kann ein Download-Link sein. Oder besser noch: ein Flash-Player. Einen Download-Link sollte man zusätzlich anbieten.

Die aktuelle Version von Firefox, Chrome, Safari und Opera unterstützen das Tag ohne Probleme. Auch bieten sie eigene Control-Panels an.

Flash-Fallback

Um das Abspielen auch in tatsächlich alten Browsern zu ermöglichen, sollte man zusätzlich einen Flash-Player integrieren, der beispielsweise eine MP3-Datei nutzt und diese wiedergibt.

Hier gibt es einen ganz netten Player, den ich auch im folgenden Beispiel dann zur Anwendung bringe.

Beispiel

Ein Beispiel mit bestmöglichen Fallbacks könnte dann so aussehen:

<audio controls>
<source src="file.ogg">
<source src="file.mp3">
<object type="application/x-shockwave-flash" data="player.swf" width="200" height="20">
<param name="movie" value="player_mp3.swf" />
<param name="bgcolor" value="#ffffff" />
<param name="FlashVars" value="mp3=file.mp3" />
</object>
</audio>

Bitte kommentiert unbedingt, wenn ihr bei irgendetwas bessere Vorschläge habt.