HTML Element - audio
Das audio-Element ermöglicht die direkte Wiedergabe von Audiodateien im Browser und stellt dafür eine semantische Schnittstelle zur Verfügung.
Beispiel
<audio controls>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
Ihr Browser unterstützt das Audio-Tag nicht.
</audio>
Definition und Verwendung
Das audio-Element dient zum Einbetten von Audioinhaltenin ein Dokument, z. B. Musik oder andere Audiostreams.
Das audio-Element enthält ein oder mehrere source-Elemente mit unterschiedlichen Audioquellen. Der Browser wählt automatisch die erste unterstützte Quelle aus.
Der Text zwischen den audio- und /audio-Tags wird nur angezeigt, wenn der Browser das audio-Element nicht unterstützt.
Audioformat- und Browserunterstützung
| Browser | MP3 | WAV | OGG |
|---|---|---|---|
| Firefox | |||
| IE/Edge | * | ||
| Safari | |||
| Chrome | |||
| Opera | |||
| * ab Edge Version 79 | |||
Attribute
Attribute erweitern Elemente um zusätzliche Eigenschaften oder Informationen und beeinflussen deren Bedeutung, Verhalten oder Darstellung. Sie bestehen in der Regel aus einem Attributnamen und einem zugehörigen Wert, wobei die zulässigen Attribute vom jeweiligen Element abhängen und teils allgemein, teils elementbezogen definiert sind.
Eine besondere Gruppe bilden die aria-*-Attribute, die zur Unterstützung der Barrierefreiheit zusätzliche Informationen für assistive Technologien bereitstellen.
| Attribut | Wert | Beschreibung |
|---|---|---|
| autoplay | autoplay | Legt fest, dass die Audiowiedergabe startet, sobald sie bereit ist.* |
| controls | controls | Legt fest, dass Audiosteuerungselemente (z. B. eine Wiedergabe-/Pause-Taste usw.) angezeigt werden sollen. |
| loop | loop | Legt fest, dass die Audiowiedergabe nach jedem Ende von neuem beginnt. |
| muted | muted | Legt fest, dass die Audioausgabe stummgeschaltet werden soll. |
| preload | auto metadata none |
Legt fest, ob und in welchem Umfang die Audiodatei beim Laden der Seite vorgeladen werden soll. |
| src | URL | Gibt die URL der Audiodatei an. |
| *) Die automatische Wiedergabe von Audioinhalten ist in modernen Browsern aus Gründen der Benutzerfreundlichkeit und Barrierefreiheit eingeschränkt. | ||
Beispiel mit autoplay
autoplay ist ein audio-spezifisches Attribut, das den Browser anweist, die Wiedergabe automatisch zu starten, sobald das Medium geladen ist.<audio controls autoplay>
<source src="beispiel.ogg" type="audio/ogg">
<source src="beispiel.mp3" type="audio/mpeg">
Ihr Browser unterstützt das Audio-Tag nicht.
</audio>
Beispiel mit muted
muted legt fest, dass die Audioausgabe stummgeschaltet werden soll.
<audio controls muted>
<source src="beispiel.ogg" type="audio/ogg">
<source src="beispiel.mp3" type="audio/mpeg">
Ihr Browser unterstützt das Audio-Tag nicht.
</audio>
Beispiel Globale Attribute
Das audio-Tag unterstützt die globalen Attribute.
| Attribut | Beschreibung |
|---|---|
| class | Weist einem Element eine oder mehrere CSS-Klassen zu. |
| Die Darstellung der Bedienelemente ist browserabhängig und nur eingeschränkt gestaltbar. | |
Global Attribut class
Weist einem Element eine oder mehrere CSS-Klassen zu.
<DOCTYPE html>
<html>
<head>
<style>
.audio-player {
display: block;
width: 100%;
max-width: 400px;
margin: 16px 0;
}
</style>
</head>
<body>
<audio class="audio-player" controls>
<source src="beispiel.ogg" type="audio/ogg">
<source src="beispiel.mp3" type="audio/mpeg">
Ihr Browser unterstützt das Audio-Tag nicht.
</audio>
</body>
</html;
Browserunterstützung
Die Unterstützung von Elementen und Attributen ist in den gängigen modernen Browsern weitgehend einheitlich gewährleistet. Unterschiede können dennoch in Details, im Einführungszeitpunkt neuer Funktionen oder bei experimentellen Features auftreten.
| Element | Firefox | Internet Explorer / Edge | Safari | Chrome | Opera |
|---|---|---|---|---|---|
audio |
|||||
| seit Version: | 3.5 | 9.0 | 4.0 | 4.0 | 11.5 |