Das audio-Element: Ton für die Seite

vom 04.08.2013 von Oliver Misch

Das <audio> ist der kleine Bruder von video und funktioniert fast identisch, nur eben für Podcasts, Musik und Sprachaufnahmen. Auch hier gilt: eingebauter Player, keine Plugins, mehrere Quellen möglich.

Syntax und Beispiel

HTML-Code

<audio controls preload="none">
    <source src="folge-12.opus" type="audio/ogg">
    <source src="folge-12.mp3" type="audio/mpeg">
    Dein Browser kann diese Audiodatei nicht abspielen.
</audio>

Der Browser probiert die Quellen von oben nach unten: Opus klingt bei kleiner Dateigröße hervorragend, MP3 ist die Rückfallebene die wirklich überall läuft. Wie beim Video zeigt controls die Bedienelemente an, ohne das Attribut ist der Player komplett unsichtbar (was gelegentlich absichtlich genutzt wird, um Töne per JavaScript abzuspieln).

preload: Wie viel vorab laden?

Wert	Verhalten
`none`	Nichts vorladen, erst beim Play-Klick. Die freundlichste Wahl, besonders bei mehreren Playern auf einer Seite.
`metadata`	Nur die Eckdaten laden, etwa die Länge fürs Anzeigen der Spieldauer.
`auto`	Der Browser darf die ganze Datei vorladen. Nur sinnvoll wenn das Abspielen sehr wahrscheinlich ist.

Was du sonst wissen solltest

Für Autoplay gelten dieselben strengen Regeln wie beim Video, Ton ohne Nutzeraktion blockiert der Browser. Die Hintergrundmusik-Ära der 90er (Stichwort Midi-Dateien auf jeder Homepage) bleibt also Geschichte, so charmant sie war. Nostalgiker finden die Geschichte dazu irgendwann im Retro-Web.
Das Element lässt sich per CSS kaum umgestalten, der Player sieht in jedem Browser anders aus. Wer volle Kontrolle will, versteckt die Controls und baut eigene Bedienelemente mit JavaScript, deutlich mehr Aufwannd.
Für gesprochene Inhalte gilt: Ein Transkript als normaler Text darunter macht den Inhalt durchsuchbar und für gehörlose Menschen zugänglich. Audio allein schließt immer jemanden aus.

Typische Fehler

Nur ein exotisches Format anbieten und alte Geräte aussperren.
preload="auto" bei zwanzig Podcast-Folgen auf einer Übersichtsseite, das lädt Unmengen umsonst.
controls vergessen und sich wundern warum nichts zu sehen ist.

Verwandt: video · iframe · Barrierefreiheit