HTML <audio> Tag
Der HTML <audio>-Tag bettet Klänge wie Musik oder Audio-Streams ein. Attribute, Formate und die Autoplay-Richtlinie – erklärt von W3docs.
Der <audio>-Tag ist eines der HTML5-Elemente, die hinzugefügt wurden, um das Einbetten von Audiodateien in eine Webseite zu ermöglichen. Er spielt Musik, Podcasts, Soundeffekte und andere Audio-Streams mit dem nativen Player des Browsers ab – ein Flash-Plugin oder ein Drittanbieter-Widget ist nicht mehr nötig.
Diese Seite erklärt, wie Audio eingebettet wird, welche Dateiformate Browser unterstützen, welche Attribute die Wiedergabe steuern (controls, autoplay, loop, muted, preload), die Autoplay-Richtlinie, über die fast jeder stolpert, und wie Audio barrierefrei gestaltet wird.
Der <source>-Tag oder das src-Attribut verweist auf die Audiodatei. Der Pfad kann eine absolute oder eine relative URL sein. Für Video funktioniert der eng verwandte <video>-Tag auf die gleiche Weise.
Syntax
Der <audio>-Tag wird paarweise verwendet. Die Datei kann entweder direkt mit src angegeben werden, oder es werden ein oder mehrere <source>-Elemente zwischen dem öffnenden (<audio>) und dem schließenden (</audio>) Tag verschachtelt, damit der Browser ein unterstütztes Format auswählen kann.
<audio>
<source src="URL" type="MIME-type">
<source src="URL" type="MIME-type">
</audio>Beispiel des HTML <audio>-Tags
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<audio controls>
<source src="/build/audios/jingle_bells.ogg" type="audio/ogg" />
<source src="/build/audios/audio.mp3" type="audio/mpeg" />
</audio>
<p>Click the play button</p>
</body>
</html>Unterstützte Audioformate
Nicht jeder Browser kann jeden Codec dekodieren, daher gibt es drei Formate, die für HTML-Audio in der Praxis relevant sind. Die folgende Tabelle zeigt die Dateiendung, den MIME-Typ für das type=""-Attribut und die allgemeine Browserunterstützung:
| Format | MIME-Typ | Unterstützung |
|---|---|---|
| MP3 | audio/mpeg | Von allen modernen Browsern unterstützt. Die sicherste Standardwahl. |
| WAV | audio/wav | Überall unterstützt, aber Dateien sind unkomprimiert und groß. |
| OGG (Vorbis) | audio/ogg | Chrome, Firefox, Edge, Opera. Nicht Safari. |
| WebM | audio/webm | Chrome, Firefox, Edge, Opera. Nicht Safari. |
Da MP3 überall abgespielt wird, reicht ein einzelnes <source src="audio.mp3" type="audio/mpeg"> in der Regel aus. Weitere Formate sind nur nötig, wenn eine lizenzgebührenfreie Alternative (OGG/WebM) oder höchste Qualität (WAV) gewünscht wird.
Wie der Browser eine <source> auswählt
Wenn mehrere <source>-Elemente verschachtelt sind, durchläuft der Browser diese von oben nach unten und spielt die erste decodierbare ab – die übrigen werden ignoriert. Das bevorzugte oder effizienteste Format sollte an erster Stelle stehen. Das type-Attribut ermöglicht es dem Browser, nicht unterstützte Formate zu überspringen, ohne sie herunterzuladen – es ist daher empfehlenswert, es stets anzugeben.
<audio controls>
<source src="audio.webm" type="audio/webm"> <!-- tried first -->
<source src="audio.ogg" type="audio/ogg"> <!-- fallback -->
<source src="audio.mp3" type="audio/mpeg"> <!-- universal fallback -->
</audio>Das controls-Attribut
Ohne controls rendert das Audio-Element nichts Sichtbares, und der Benutzer hat keine Möglichkeit, es zu starten. Das controls-Attribut weist den Browser an, seine native Player-Oberfläche anzuzeigen (Abspielen/Pause, Zeitleiste, Lautstärke):
<audio src="audio.mp3" controls></audio>Beispiel des HTML <audio>-Tags mit dem controls-Attribut
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<audio controls src="/build/audios/audio.mp3">
Your browser does not support the audio element.
</audio>
<p>Click the play button</p>
</body>
</html>Das loop-Attribut
loop ist ein boolean-Attribut. Wenn es vorhanden ist, beginnt der Clip nach seinem Ende erneut von vorn – praktisch für Hintergrundklang oder einen sich wiederholenden Soundeffekt:
<audio src="audio.mp3" controls loop></audio>Autoplay und das muted-Attribut
Dies ist die häufigste Quelle der Verwirrung bei HTML-Audio – bitte sorgfältig lesen.
Das autoplay-Attribut fordert den Browser auf, die Wiedergabe zu starten, sobald das Medium bereit ist, ohne dass der Benutzer auf Play drückt:
<audio src="audio.mp3" autoplay></audio>In der Praxis blockieren moderne Browser Autoplay mit Ton. Chrome, Safari und Firefox verweigern das automatische Abspielen von hörbaren Medien, bis der Benutzer mit der Seite interagiert hat (ein Klick, ein Tippen, ein Tastendruck). Dies schützt Benutzer vor Webseiten, die unerwartet Lärm machen. Wenn autoplay für einen hörbaren Clip gesetzt wird, bleibt er in der Regel still und pausiert.
Der einzig zuverlässige Weg, Autoplay zum Funktionieren zu bringen, besteht darin, zusätzlich muted zu setzen. Ein stummgeschalteter Clip enthält keinen Ton, sodass der Browser ihn selbstständig starten darf:
<!-- Autoplays in modern browsers because it is muted -->
<audio src="audio.mp3" controls autoplay muted></audio>Das muted-Attribut startet das Element lediglich mit ausgeschalteter Lautstärke; der Benutzer kann es über die Steuerung wieder einschalten. Für Audio allein ist ein stummgeschalteter, automatisch abspielender Clip selten sinnvoll, aber das Muster ist es wert, gekannt zu werden, da dieselbe Regel für den <video>-Tag gilt, wo stummgeschaltetes Autoplay weit verbreitet ist.
Wenn Ton tatsächlich sofort benötigt wird, sollte die Wiedergabe stattdessen durch eine Benutzeraktion ausgelöst werden. Die HTML DOM JavaScript API ermöglicht es, das Element mit Methoden wie .play() innerhalb eines Click-Handlers zu steuern, was der Browser als benutzergenehmigt behandelt.
Das preload-Attribut
preload ist das einzige <audio>-Attribut, das einen Wert entgegennimmt, anstatt ein boolean zu sein. Es gibt dem Browser einen Hinweis, wie viel der Datei vor dem Drücken von Play geladen werden soll:
auto— der Browser darf die gesamte Datei im Voraus herunterladen. Verwenden Sie es, wenn erwartet wird, dass das Audio abgespielt wird, und sofortige Wiedergabe gewünscht ist.metadata— nur Metadaten wie Dauer und die ersten Bytes werden abgerufen, nicht das Audio selbst. Ein guter Mittelweg, der den Steuerelementen ermöglicht, die Spurdauer anzuzeigen, ohne Bandbreite zu verschwenden.none— es wird nichts vorgeladen, bis der Benutzer interagiert. Am besten geeignet, wenn die Seite viele Clips enthält oder die meisten Besucher das Audio nicht abspielen werden.
<audio src="audio.mp3" controls preload="metadata"></audio>preload ist nur ein Hinweis – ein Browser kann ihn ignorieren, um Daten zu sparen, und er wird durch autoplay außer Kraft gesetzt, das das Laden der Datei erzwingt.
Barrierefreiheit
Audio, das nur als Ton vorliegt, schließt alle aus, die es nicht hören können. Einige Ergänzungen machen eingebettetes Audio inklusiv:
- Ein Texttranskript bereitstellen. Für sprachlastiges Audio (Interviews, Podcasts) sollten die Worte in der Nähe des Players veröffentlicht werden, damit Screenreader-Nutzer und gehörlose Benutzer denselben Inhalt erhalten.
- Untertitel mit
<track>hinzufügen. Ein<track kind="captions">-Element ermöglicht es Browsern, zeitgesteuerten Text für das Audio anzuzeigen. - Den Player mit
aria-labelbeschriften, wenn keine sichtbare Überschrift vorhanden ist, damit Hilfstechnologien ankündigen, was der Clip enthält. - Den Fallback-Text zwischen den Tags als graceful degradation verwenden: Browser, die das Element nicht abspielen können, zeigen ihn stattdessen an.
<audio controls aria-label="Episode 12: Building accessible web audio">
<source src="podcast.mp3" type="audio/mpeg">
<track kind="captions" src="podcast.vtt" srclang="en" label="English">
Your browser does not support the audio element.
<a href="podcast.mp3">Download the audio</a> instead.
</audio>Attribute
Der <audio>-Tag verfügt über Attribute, die den Pfad zur Audiodatei, das Wiedergabeverhalten usw. angeben. Die Attribute controls, autoplay, loop und muted sind boolean; ihre Werte können weggelassen werden. Wenn angegeben, wird die entsprechende Funktion standardmäßig aktiviert.
| Attribut | Wert | Definition |
|---|---|---|
| autoplay | Spielt die Audiodatei nach dem Laden der Seite automatisch ab. | |
| controls | Zeigt das Steuerfeld an (Abspielen/Pause, Lautstärke usw.). Fehlt das controls-Attribut, ist das Audio auf der Seite nicht sichtbar. | |
| loop | Wiederholt die Audiodatei nach ihrem Ende kontinuierlich von Anfang an. | |
| muted | Schaltet das Audio standardmäßig stumm. | |
| preload | auto, metadata, none | Legt die Vorladestrategie für die Audiodatei fest. |
| src | URL | Gibt den Pfad zur Audiodatei an. |
Der <audio>-Tag unterstützt die Globalen Attribute und die Event-Attribute.