Mit HTML5 ist es endlich möglich, Audio-Ressourcen direkt im Browser abspielen zu lassen, ohne auf ein Plugin vertrauen oder einen flash-basierten Audio-Player anbieten zu müssen. Das fördert die Verbreitung von Musik und Podcasts (gesprochenen Artikeln oder Dialogen, manchmal ergänzt durch Musik, also selbst gemachtes Radio).
Eine wichtige Voraussetzung für den Erfolg des neuen audio-Elements in HTML5 ist allerdings, dass alle Browser bestimmte Audio-Formate ohne zusätzliche Software abspielen können, also direkt in der Browser-Software implementieren. Derzeit gibt es diesbezüglich noch Probleme, was daran liegt, dass das verbreitetste und beliebteste Audio-Format, MP3, durch Patente geschützt ist. Einige Browser-Anbieter können oder wollen es deshalb nicht implementieren und favorisieren stattdessen das OpenSource-Audio-Format OGG.
Nachfolgende Tabelle zeigt, welche der Browser, die das audio-Element von HTML5 unterstützen, welche Audio-Dateiformate damit abspielen können:
| Browser | MP3 | OGG | WAV | AU/SND | AIF |
|---|---|---|---|---|---|
 |
nein | ja | ja | nein | nein |
 |
ja | ja | nein | nein | nein |
 |
ja | nein | ja | ja | ja |
 |
nein | ja | ja | ja | nein |
Der MS Internet Explorer kommt in dieser Tabelle bis einschließlich Version 8.0 nicht vor, da er das audio-Element überhaupt nicht kennt. Leider wird diese Tatsache wohl noch auf Jahre die Verwendung des audio-Elements ausbremsen. Für das Problem, dass es kein Audio-Format gibt, das von allen Browsern direkt abgespielt werden kann, bietet HTML5 indessen eine technische Lösung an. Der Nachteil dabei: Sie müssen jeden Audio-Track in mindestens zwei Dateiformaten anbieten, nämlich in MP3 und OGG.
Beispiel
<h1>Rabenanwälte und Abmahnkrähen</h1> <div> <audio preload controls src="rabenanwaelte-und-abmahnkraehen.mp3"> <source src="rabenanwaelte-und-abmahnkraehen.ogg"> </audio> </div> <a href="http://draketo.de/deutsch/lieder/licht/rabenanwaelte-und-abmahnkraehen"> Webseite zum Song</a>
Das Beispiel zeigt eine Anordnung, die nur zeigen soll, wie es aussehen könnte. Da zum Redaktionszeitpunkt noch nicht endgültig entschieden ist, welches Audio-Format tatsächlich das Default-Format werden soll, ist derzeit folgende Variante des obigen Beispiels eigentlich korrekter:
<audio preload controls> <source src="rabenanwaelte-und-abmahnkraehen.mp3"> <source src="rabenanwaelte-und-abmahnkraehen.ogg"> </audio>
Erläuterung
Die Audio-Ressource wird durch <audio>…</audio> markiert. Innerhalb des audio-Elements können Sie ein oder mehrere source-Elemente in Form eines Standalone-Tags <source> notieren (source = Quelle). Im einleitenden <audio>-Tag geben Sie beim Attribut src die eigentlich gewünschte und bevorzugte Audio-Datei an, die abgespielt werden soll. In dem oder den source-Elementen, die ebenfalls je ein src-Attribut haben, notieren Sie Audio-Dateien mit gleichem Inhalt, aber anderen Audio-Formaten (src = source = Quelle). Durch das Zusammenspiel von audio und source können Sie also Audio-Inhalte in mehreren Formaten anbieten.
Bei den src-Attributen gelten die Regeln für Referenzierung in HTML.
Im einleitenden <audio>-Tag sind weitere wichtige Attribute möglich, mit der Sie steuern, wie die Wiedergabe letztlich erfolgen soll:
- Wenn Sie das Standalone-Attribut controls angeben, zeigt der Browser einen sichtbaren Player mit Grundfunktionen wie Pause/Weiterspielen, Lautstärkeregelung und Wiedergabe-Zeitanzeige an. Lassen Sie das controls-Attribut dagegen weg, wird kein Player angezeigt. Der Anwender hat in diesem Fall keine Kontrollmöglichkeiten in Bezug auf die Wiedergabe.
- Wenn Sie das Standalone-Attribut autoplay angeben, beginnt der Browser sofort beim Laden der Seite mit der Wiedergabe der Audio-Ressource. Wenn Sie kein Attribut controls notieren, also keinen sichtbaren Player anzeigen wollen, und nur mit HTML, nicht mit JavaScript arbeiten, müssen Sie das Attribut autoplay unbedingt notieren. Andernfalls wird die Audio-Ressource nicht abgespielt, und der Anwender kann den Abspielvorgang auch nicht starten.
- Wenn Sie das Standalone-Attribut preload angeben, beginnt der Browser sofort beim Laden der Seite damit, den Inhalt der Audio-Ressource downzuloaden (preload = vorab laden). Die Angabe dieses Attributs ist nur sinnvoll in Verbindung mit dem controls-Attribut. Verwenden Sie es dann, wenn es sehr wahrscheinlich ist, dass ein Anwender die Audio-Ressource abspielen wird. Das ist zum Beispiel der Fall, wenn es die einzige Audio-Ressource der Webseite ist, und wenn es der zentrale Inhalt der aktuellen Seite ist. Wenn eine Webseite dagegen mehrere Audio-Ressourcen enthält, deren Inhalte gemeinsam etliche Megabyte groß sind, sollten Sie darauf verzichten, dem Anwender einen Preload aufzuzwingen.
- Wenn Sie das Standalone-Attribut loop angeben, wird der Audio-Track immer wieder von neuem abgespielt, wenn er zu Ende ist (Endlosschleife — loop = Schleife).
Für das source-Element, das innerhalb von <audio>…</audio> für alternative Audio-Ressourcen notiert werden kann, gibt es zwei weitere Attribute: type und media.
Mit type können Sie den MimeType der Audio-Datei angeben. Im Zusammenhang mit Audio-Dateien kommen jene MimeTypen in Frage, die mit audio/ beginnen, also z.B. audio/x-aiff, audio/x-midi, audio/x-wav usw. Wenn nötig, sollten Sie außerdem eine Codec-Angabe innerhalb der type-Angabe notieren. Eine solche Erweiterung der MimeType-Angabe wird im RFC 4281 beschrieben. Sinnvoll ist das beispielsweise im Zusammenhang mit dem OGG-Format. Geben Sie type="audio/ogg; codecs=vorbis" an, wenn es sich um eine Vorbis-Kodierung handelt, oder type="audio/ogg; codecs=speex" im Fall einer Speex-Kodierung.
Die HTML5-Spezifikation listet im Zusammenhang mit Audio-Codecs folgende typische Angaben für das type-Attribut auf:
- type='audio/ogg; codecs=vorbis'
- type='audio/ogg; codecs=speex'
- type='audio/ogg; codecs=flac'
Mit dem media-Attribut können Sie angeben, für welche Medientypen die Audio-Ressource geeignet ist. Die Voreinstellung ist media="all", also alle Medientypen. Beim media-Attribut wird als Wert eine gültige Medienabfrage erwartet.
Weitere Hinweise
Die Attribute type und media gibt es nur beim source-Element, nicht beim audio-Element. Der Grund ist, dass beim audio-Element beim src-Attribut nur Dateien angegeben werden sollten, die der Browser in jedem Fall selbst erkennt. Greift er dagegen auf eine im alternativen source-Element angegebene Datei zurück, helfen die zusätzlichen Attribute gegebenenfalls bei der Wahl eines externen Abspielprogramms.
Wie der im Browser angezeigte Audio-Player genau aussieht, ist nicht festgelegt.
Das Aussehen der Audio-Player ist nicht festgelegt
Das Default-Aussehen der Audio-Player passt aber nicht unbedingt zu jedem Webseiten-Layout. Es ist zwar möglich, CSS-Eigenschaften auf das audio-Element anzuwenden, doch damit ist das Aussehen des Players nur bedingt beeinflussbar. Um eigene Player zu kreieren, müssen Sie auf Scripting zurückgreifen. Es gibt auch fertige Lösungen script-basierter Audio-Player für das audio-Element, zum Beispiel JAI, das Javascript Audio Interface (http://hyper-metrix.com/misc/jai/).
Die Browser, die das audio-Element kennen, interpretieren nicht unbedingt alle Attribute davon. Das gilt besonders für das preload-Attribut, das in der HTML5-Spezifikation zunächst als autobuffer-Attribut ausgewiesen wurde.
Wenn Sie XHTML-konform arbeiten, notieren Sie source-Elemente in der Form <source … /> und die Standalone-Attribute durch Zuweisung des Attributnamens als Wert, also preload="preload", autoplay="autoplay", controls="controls" und loop="loop".
Referenzinformationen
- Elementreferenz <audio>
- Elementreferenz <source>
- Attributreferenz: src
- Attributreferenz: preload
- Attributreferenz: loop
- Attributreferenz: controls
- Attributreferenz: autoplay
- Attributreferenz: type
- Attributreferenz: media
(Browser-Angaben mit weiter oben erwähnten Einschränkungen)
Korrekturen, Hinweise und Ergänzungen
Bitte scheut euch nicht und meldet, was auf dieser Seite sachlich falsch oder irreführend ist, was ergänzt werden sollte, was fehlt usw. Dazu bitte oben aus dem Menü Seite den Eintrag Diskutieren wählen. Es ist keine Anmeldung erforderlich, um Anmerkungen zu posten. Unpassende Postings, Spam usw. werden allerdings kommentarlos entfernt.