Audio hinzufügen

Mit dem <audio>-Element kannst du Audiodateien direkt in eine HTML-Seite einbinden und im Browser abspielen. Es eignet sich zum Beispiel für Musik, Podcasts, Sprachaufnahmen oder Soundeffekte.

Grundstruktur

Nicht jeder Browser unterstützt dieselben Audioformate. Deshalb ist es sinnvoll, mehrere Audioquellen mit dem <source>-Element anzugeben. Der Browser wählt dann automatisch das erste Format aus, das er abspielen kann.

1<audio controls>
2  <source src="/audio/beispiel.ogg" type="audio/ogg">
3  <source src="/audio/beispiel.mp3" type="audio/mpeg">
4  Dein Browser unterstützt das Audio-Element nicht.
5</audio>

Erklärung:

• <audio>: Bindet eine Audiodatei in die Webseite ein
• <source>: Gibt eine mögliche Audioquelle an
• src: Pfad zur Audiodatei
• type: Gibt das Dateiformat an, zum Beispiel audio/mpeg für MP3
• controls: Zeigt Standard-Bedienelemente wie Play, Pause und Lautstärke an
• Fallback-Text: Wird angezeigt, wenn der Browser das Audio-Element nicht unterstützt

Wichtige Attribute

Beispiel mit mehreren Attributen

1<audio controls autoplay loop muted>
2  <source src="/audio/musik.mp3" type="audio/mpeg">
3</audio>

In diesem Beispiel startet das Audio automatisch, wiederholt sich nach dem Ende und ist zunächst stumm geschaltet.

Hinweis zu autoplay

Viele Browser erlauben automatisches Abspielen nur dann, wenn das Audio stumm ist. Deshalb wird autoplay oft zusammen mit muted verwendet. Generell solltest du automatisches Abspielen sparsam einsetzen, da es Nutzer stören kann.

Unterstützte Formate

Häufig verwendete Audioformate im Web sind MP3, OGG und WAV. MP3 wird von den meisten Browsern sehr gut unterstützt.

Barrierefreiheit

Du solltest Audioinhalte möglichst barrierearm einbinden. Wenn eine Audiodatei wichtige Informationen enthält, solltest du zusätzlich eine Textalternative oder eine kurze Zusammenfassung anbieten.