HTML <audio>-Tag
Die <audio>-Tag ist eines der HTML5-Elemente, die eingeführt wurden, um Audiodateien in eine Webseite einzubetten. Da nicht alle Browser alle Audioformate unterstützen, wird die Audiodatei mit speziellen Codecs kodiert.
Die <source>-Tag oder das src-Attribut wird verwendet, um die Varianten derselben Audiodatei anzugeben. Der Pfad zu einer Audiodatei kann absolute oder relative URLs enthalten.
Syntax
Die <audio>-Tag ist ein umschließendes Element. Der Inhalt wird zwischen dem öffnenden (<audio>) und dem schließenden (</audio>) Tag geschrieben.
HTML <audio>-Tag
<audio>
<source src="URL">
<source src="URL">
</audio>Beispiel für die HTML <audio>-Tag:
Beispiel für die HTML <audio>-Tag:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<audio controls>
<source src="https://de.w3docs.com/build/audios/jingle_bells.ogg" type="audio/ogg" />
<source src="https://de.w3docs.com/build/audios/audio.mp3" type="audio/mpeg" />
</audio>
<p>Click the play button</p>
</body>
</html>Das Loop-Attribut
Die Verwendung des loop-Attributs sorgt dafür, dass die Audiodatei immer wieder abgespielt wird:
HTML <audio>-Tag
<audio src="audio.mp3" autoplay loop></audio>Anzeigen der Browser-Steuerungselemente
Sie können den Browser die Steuerungselemente für den Benutzer anzeigen lassen, z. B. Lautstärke oder Wiedergabe/Pause. Dies erfolgt mithilfe des controls-Attributs.
Code zum Anzeigen der Browser-Steuerungselemente
<audio src="audio.mp3" controls></audio>Beispiel für die HTML <audio>-Tag mit dem controls-Attribut:
Beispiel für die HTML <audio>-Tag mit dem controls-Attribut
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<audio controls src="https://de.w3docs.com/build/audios/audio.mp3">
Your browser does not support the audio element.
</audio>
<p>Click the play button</p>
</body>
</html>Mehrere Dateiformate
Mit der <audio>-Tag können Sie mehrere Formate derselben Audiodatei definieren.
Beispiel für mehrere Dateiformate
<audio controls>
<source src="audio.ogg">
<source src="audio.mp3">
</audio>Attribute
Die <audio>-Tag verfügt über Attribute, die den Pfad zur Audiodatei, das Wiedergabeverhalten usw. angeben. Die Attribute controls, autoplay, loop und muted sind boolesch; ihre Werte können weggelassen werden. Wenn sie angegeben sind, wird die entsprechende Funktion standardmäßig aktiviert.
| Attribut | Wert | Definition |
|---|---|---|
| autoplay | Spielt die Audiodatei automatisch ab, nachdem die Seite geladen wurde. | |
| controls | Zeigt das Bedienfeld (Wiedergabe/Pause, Lautstärke usw.) an. Fehlt das controls-Attribut, ist die Audiodatei nicht auf der Seite sichtbar. | |
| loop | Wiederholt die Audiodatei nach dem Ende kontinuierlich von vorne. | |
| muted | Stummschaltet die Audiodatei standardmäßig. | |
| preload | auto, metadata, none | Definiert die Vorladestrategie für die Audiodatei. |
| src | URL | Gibt den Pfad zur Audiodatei an. |
Die <audio>-Tag unterstützt die Globalen Attribute und die Ereignisattribute.
Praxis
Welche Eigenschaften hat das HTML-Audio-Tag?