<audio>

Zuletzt aktualisiert am 3. Februar 2026

Das <audio>-Element bettet eine Audiodatei direkt in deine Webseite ein — ein nativer Audioplayer ohne externe Plugins. Ob Podcast, Musikbeispiel, Sprachaufnahme oder Sound-Effekt: Mit <audio> baust du einen funktionierenden Player in wenigen Zeilen HTML. Auf dieser Seite lernst du, wie du Audio einbindest, welche Formate du verwenden solltest und warum controls keine optionale Nettigkeit ist.

Grundlagen

<audio> funktioniert sehr ähnlich wie <video>, nur ohne das visuelle Bild. Der Browser zeigt standardmäßig einen kompakten Player mit Play-Button, Fortschrittsbalken und Lautstärkeregler an — vorausgesetzt, du gibst das controls-Attribut an.

• <audio> ist ein Inline-Block-Element, das ohne controls unsichtbar ist
• Das controls-Attribut zeigt den nativen Audioplayer an (Play, Pause, Lautstärke, Fortschritt)
• Audio kann über src direkt oder über <source>-Kindelemente mit Format-Fallbacks eingebunden werden
• Autoplay wird von den meisten Browsern blockiert — genau wie bei Video
• Inhalt zwischen <audio> und </audio> wird als Fallback angezeigt, wenn der Browser das Element nicht unterstützt

Syntax

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

Attribute

Beispiele

Einfacher Audioplayer

Der einfachste Fall: Eine Audiodatei mit Steuerungselementen. Der Browser zeigt automatisch einen Player mit Play-Button, Fortschrittsbalken und Lautstärkeregler:

<audio controls>
  <source src="podcast.mp3" type="audio/mpeg">
  Dein Browser unterstützt kein Audio.
</audio>

Audio mit Format-Fallbacks

Verschiedene Browser unterstützen verschiedene Audioformate. Mit mehreren <source>-Elementen bietest du Alternativen an — der Browser wählt das erste Format, das er abspielen kann:

<audio controls>
  <source src="musik.ogg" type="audio/ogg">
  <source src="musik.mp3" type="audio/mpeg">
  <source src="musik.wav" type="audio/wav">
  Dein Browser unterstützt kein Audio.
</audio>

Audio mit Fallback-Link

Für ältere Browser oder spezielle Umgebungen, die <audio> nicht unterstützen, kannst du einen Download-Link als Fallback bereitstellen:

<audio controls>
  <source src="interview.mp3" type="audio/mpeg">
  <p>
    Dein Browser unterstützt kein Audio.
    <a href="interview.mp3">Audiodatei herunterladen</a>
  </p>
</audio>

Barrierefreiheit

• controls ist Pflicht: Ohne controls ist das Audio-Element unsichtbar — Nutzer sehen und hören nichts und haben keine Möglichkeit, die Wiedergabe zu steuern. Verwende controls immer, es sei denn, du steuerst die Wiedergabe vollständig über JavaScript und bietest eigene zugängliche Steuerungselemente an.
• Transkript bereitstellen: Gehörlose und schwerhörige Nutzer können Audio nicht wahrnehmen. Stelle für Podcasts, Interviews und andere gesprochene Inhalte immer ein Texttranskript bereit — entweder direkt auf der Seite oder als verlinktes Dokument.
• Autoplay vermeiden: Automatisch abspielende Audiodateien sind besonders störend für Screenreader-Nutzer, da sie die Sprachausgabe überlagern können. Lass den Nutzer selbst entscheiden, wann er Audio abspielen möchte.

Häufige Fehler

Autoplay für Hintergrundmusik: Automatisch abspielende Hintergrundmusik auf Webseiten ist ein Relikt der 90er-Jahre. Moderne Browser blockieren Autoplay aus gutem Grund — Nutzer wollen selbst entscheiden, wann sie Audio hören. Biete stattdessen einen gut sichtbaren Play-Button an.

Fehlende controls: Ohne controls ist das Audio-Element komplett unsichtbar. Der Nutzer sieht nichts, hört nichts und kann nichts tun. Auch wenn du einen eigenen Player baust, behalte controls als Fallback bei.

Kein Fallback: Obwohl <audio> heute breit unterstützt wird, ist ein Fallback-Text oder Download-Link zwischen den Tags gute Praxis. In E-Mail-Clients oder speziellen Umgebungen kann Audio nicht abgespielt werden — dann hilft ein alternativer Zugangsweg.

Browser-Kompatibilität

Das audio-Element wird von allen modernen Browsern vollständig unterstützt. MP3 funktioniert überall, OGG in Chrome, Firefox, Edge und Opera.

Email-Kompatibilität

Audio-Unterstützung in Email-Clients ist stark eingeschränkt. Die meisten Clients entfernen audio-Elemente aus Sicherheitsgründen.

Verwandte Elemente