<audio>

Das <audio>-Element bettet eine Audiodatei direkt in deine Webseite ein. Das ist 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.

Steckbrief <audio>

Kategorie: Links & Medien
Art: Block
Attribute: 6
Beispiele: 3
Browser: 5 von 5
E-Mail: 0 von 5
Stand: 03.02.2026

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

index.html

Grundsyntax

<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

6 Attribute

Attribut und Beispiel	Beschreibung
`src` URL src="audio.mp3"	Pfad zur Audiodatei. Alternativ können source-Elemente für mehrere Formate verwendet werden.
`controls` Boolean controls	Zeigt Steuerungselemente an (Play, Pause, Lautstärke, Fortschritt).
`autoplay` Boolean autoplay	Startet die Wiedergabe automatisch. Wird von den meisten Browsern blockiert.
`muted` Boolean muted	Schaltet den Ton stumm.
`loop` Boolean loop	Wiederholt die Audiodatei endlos nach dem Ende.
`preload` String preload="metadata"	Gibt an, wie viel vorab geladen werden soll: none, metadata oder auto.

Beispiele

3 Beispiele

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

index.html

Einfacher Audioplayer

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

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:

index.html

Format-Fallbacks

<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>

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

index.html

Fallback mit Download-Link

<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

3 Punkte

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

3 Fehler

01 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.

02 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.

03 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

5 von 5

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

Chrome

Komplett
Firefox

Komplett
Safari

Komplett
Edge

Komplett
Opera

Komplett

Email-Kompatibilität

0 von 5

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

Apple Mail

Teilweise

Apple Mail zeigt den Audioplayer an, aber die Wiedergabe funktioniert nicht immer zuverlässig.
Gmail

Keine

Gmail entfernt audio-Elemente komplett aus dem HTML.
Outlook

Keine

Outlook entfernt audio-Elemente. Verlinke stattdessen die Audiodatei.
Thunderbird

Teilweise

Thunderbird zeigt den Player an, aber Autoplay funktioniert nicht.
Yahoo Mail

Keine

Yahoo Mail entfernt audio-Elemente aus dem HTML.

einmal die Woche, kostenlos

Neue Artikel und Videos, was sich auf der Lernplattform tut, und ab und zu ein Sonderpreis zum Kursstart. Kurz genug, dass du es auch liest.

Zuletzt verschickt · KW 40

Einmal alles neu, und die Lernplattform ist da

<audio>

Grundlagen

Syntax

Attribute

Beispiele

Barrierefreiheit

Häufige Fehler

Browser-Kompatibilität

Email-Kompatibilität

Newsletter