Ausführbare HTML-Docs: HTML Audio

Q: Wie füge ich einer HTML-Seite Audio hinzu?

Mit . Das Attribut controls zeigt den Player des Browsers mit Play-Button, Zeitleiste und Lautstärke. Ohne es ist das Element unsichtbar.

Q: Wie spiele ich Audio in HTML in Schleife ab?

Füg das Attribut loop hinzu: . Wenn die Datei zu Ende ist, beginnt sie wieder von vorn.

Q: Wie spiele ich mit JavaScript einen Ton ab?

Erzeug oder wähl ein audio-Element aus und ruf play() auf, zum Beispiel new Audio('click.mp3').play() in einem Klick-Handler. play() gibt ein Promise zurück, das abgelehnt wird, wenn der Browser die Wiedergabe blockiert.

So fügst du Audio ein

Lass das <audio>-Element auf eine Tondatei zeigen und füg controls hinzu:

<audio src="song.mp3" controls></audio>

controls zeigt den Player des Browsers: Abspielen und Pause, eine Zeitleiste, die Zeit und eine Lautstärkeregelung. Ohne controls nimmt das Element überhaupt keinen Platz ein. Die Vorschau kann keine Dateien von deinem Computer laden, deshalb erzeugt dieses Beispiel per Skript im Browser eine kurze WAV-Datei und nimmt sie als src. Drück auf Play:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Audio</title>
</head>
<body style="font-family: system-ui, sans-serif;">
  <audio id="player" controls></audio>
  <p>Four notes, 1.8 seconds.</p>
  <script>
    // Builds a tiny WAV file in the browser (stand-in for song.mp3)
    function makeWav(notes) {
      const rate = 8000, samples = [];
      for (const [freq, secs] of notes) {
        const n = secs * rate;
        for (let i = 0; i < n; i++) {
          samples.push(Math.sin(2 * Math.PI * freq * i / rate) * 0.4 * Math.min(1, (n - i) / 400));
        }
      }
      const view = new DataView(new ArrayBuffer(44 + samples.length * 2));
      const text = (at, s) => [...s].forEach((c, i) => view.setUint8(at + i, c.charCodeAt(0)));
      text(0, 'RIFF'); view.setUint32(4, 36 + samples.length * 2, true); text(8, 'WAVEfmt ');
      view.setUint32(16, 16, true); view.setUint16(20, 1, true); view.setUint16(22, 1, true);
      view.setUint32(24, rate, true); view.setUint32(28, rate * 2, true);
      view.setUint16(32, 2, true); view.setUint16(34, 16, true);
      text(36, 'data'); view.setUint32(40, samples.length * 2, true);
      samples.forEach((s, i) => view.setInt16(44 + i * 2, s * 32767, true));
      return URL.createObjectURL(new Blob([view], { type: 'audio/wav' }));
    }
    document.getElementById('player').src = makeWav([[523, 0.4], [659, 0.4], [784, 0.4], [1047, 0.6]]);
  </script>
</body>
</html>

Der Player sieht in Chrome, Firefox und Safari unterschiedlich aus, weil jeder Browser seinen eigenen zeichnet. Lösch controls, und der Player verschwindet, auch wenn das Audio für JavaScript zum Abspielen noch da ist.

Audio-Attribute

Attribut	Was es macht
`controls`	Zeigt den Player des Browsers
`autoplay`	Versucht, beim Laden abzuspielen (mit Ton blockiert, siehe unten)
`loop`	Beginnt am Ende der Datei von vorn
`muted`	Startet mit ausgeschalteter Lautstärke
`preload`	`none` (nichts laden bis Play), `metadata` (nur die Länge) oder `auto` (der Browser entscheidet)
`src`	Die abzuspielende Datei; oder `<source>`-Kindelemente für mehrere Formate

Nimm preload="none" oder "metadata" auf Seiten mit vielen Playern, etwa einer Liste von Podcast-Folgen, damit die Seite nicht vorab jede Datei herunterlädt.

Formate und Fallbacks

Führ mit <source> mehrere Dateien auf, und der Browser spielt die erste ab, die er unterstützt. Text im Element erscheint nur in Browsern ohne Unterstützung für <audio>:

<audio controls preload="metadata">
  <source src="episode.opus" type="audio/ogg; codecs=opus">
  <source src="episode.mp3" type="audio/mpeg">
  <p>Your browser cannot play audio. <a href="episode.mp3">Download the episode</a>.</p>
</audio>

Format	MIME-Typ	Hinweise
MP3	`audio/mpeg`	Läuft in jedem aktuellen Browser; die sichere Wahl für eine einzelne Datei
AAC (`.m4a`)	`audio/mp4`	Breit unterstützt, gute Qualität bei kleiner Größe
Opus oder Vorbis (`.ogg`, `.webm`)	`audio/ogg`, `audio/webm`	Kleine Dateien; führ MP3 als Fallback auf, weil die Unterstützung in Safari je nach Version schwankt
WAV	`audio/wav`	Unkomprimiert und groß; gut für kurze Soundeffekte

Warum autoplay scheitert

Browser lassen eine Seite nicht von selbst Töne abspielen. autoplay oder ein Aufruf von play(), bevor der Nutzer geklickt oder getippt hat, wird abgelehnt. Dieses Beispiel versucht beim Laden abzuspielen, gibt aus, was passiert ist, und bietet dann einen Button an:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Autoplay</title>
  <style>
    body { font-family: system-ui, sans-serif; margin: 12px; }
    button { font: inherit; padding: 6px 14px; }
  </style>
</head>
<body>
  <p id="result">Trying to play...</p>
  <button id="play">Play with a click</button>
  <script>
    // Builds a short beep as a WAV file (stand-in for a real sound file)
    function beep(freq, secs) {
      const rate = 8000, n = secs * rate;
      const view = new DataView(new ArrayBuffer(44 + n * 2));
      const text = (at, s) => [...s].forEach((c, i) => view.setUint8(at + i, c.charCodeAt(0)));
      text(0, 'RIFF'); view.setUint32(4, 36 + n * 2, true); text(8, 'WAVEfmt ');
      view.setUint32(16, 16, true); view.setUint16(20, 1, true); view.setUint16(22, 1, true);
      view.setUint32(24, rate, true); view.setUint32(28, rate * 2, true);
      view.setUint16(32, 2, true); view.setUint16(34, 16, true);
      text(36, 'data'); view.setUint32(40, n * 2, true);
      for (let i = 0; i < n; i++) view.setInt16(44 + i * 2, Math.sin(2 * Math.PI * freq * i / rate) * 12000, true);
      return URL.createObjectURL(new Blob([view], { type: 'audio/wav' }));
    }
    const sound = new Audio(beep(440, 0.5));
    const result = document.getElementById('result');
    sound.play()
      .then(() => { result.textContent = 'Autoplay worked this time.'; })
      .catch((err) => { result.textContent = 'Autoplay was blocked: ' + err.name; });
    document.getElementById('play').onclick = () => {
      sound.currentTime = 0;
      sound.play()
        .then(() => { result.textContent = 'Playing, because you clicked.'; })
        .catch((err) => { result.textContent = 'Still blocked: ' + err.name; });
    };
  </script>
</body>
</html>

Meistens siehst du NotAllowedError, den Fehler, den ein Browser beim Blockieren der Wiedergabe liefert. Der Button funktioniert, weil ein Klick als Erlaubnis zählt. Jeder Browser hat eigene zusätzliche Regeln (Chrome merkt sich zum Beispiel Websites, auf denen du oft Medien abspielst), verlass dich also nie auf autoplay: Starte Töne durch eine Aktion des Nutzers und behandle immer das Promise, das play() zurückgibt.

new Audio(url) erzeugt in JavaScript ein audio-Element, ohne es der Seite hinzuzufügen; praktisch für Soundeffekte.

Eigene Steuerelemente bauen

Versteck den eingebauten Player, indem du controls weglässt, und steuere das Element über seine JavaScript-API: play(), pause(), currentTime, duration, volume und Events wie timeupdate und ended:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Custom player</title>
  <style>
    body { font-family: system-ui, sans-serif; margin: 12px; }
    .player { display: flex; align-items: center; gap: 10px; max-width: 360px; padding: 10px; border: 2px solid #e5e7eb; border-radius: 10px; }
    .player button { font: inherit; width: 72px; padding: 6px 0; border: 0; border-radius: 6px; background: #2563eb; color: #fff; cursor: pointer; }
    progress { flex: 1; }
    #time { font-variant-numeric: tabular-nums; font-size: 14px; color: #374151; }
  </style>
</head>
<body>
  <div class="player">
    <button id="toggle" aria-label="Play">Play</button>
    <progress id="bar" value="0" max="1"></progress>
    <span id="time">0.0 s</span>
  </div>
  <audio id="audio"></audio>
  <script>
    function makeWav(notes) {
      const rate = 8000, samples = [];
      for (const [freq, secs] of notes) {
        const n = secs * rate;
        for (let i = 0; i < n; i++) {
          samples.push(Math.sin(2 * Math.PI * freq * i / rate) * 0.4 * Math.min(1, (n - i) / 400));
        }
      }
      const view = new DataView(new ArrayBuffer(44 + samples.length * 2));
      const text = (at, s) => [...s].forEach((c, i) => view.setUint8(at + i, c.charCodeAt(0)));
      text(0, 'RIFF'); view.setUint32(4, 36 + samples.length * 2, true); text(8, 'WAVEfmt ');
      view.setUint32(16, 16, true); view.setUint16(20, 1, true); view.setUint16(22, 1, true);
      view.setUint32(24, rate, true); view.setUint32(28, rate * 2, true);
      view.setUint16(32, 2, true); view.setUint16(34, 16, true);
      text(36, 'data'); view.setUint32(40, samples.length * 2, true);
      samples.forEach((s, i) => view.setInt16(44 + i * 2, s * 32767, true));
      return URL.createObjectURL(new Blob([view], { type: 'audio/wav' }));
    }
    const audio = document.getElementById('audio');
    const toggle = document.getElementById('toggle');
    audio.src = makeWav([[392, 0.5], [440, 0.5], [494, 0.5], [523, 1]]);
    toggle.onclick = () => {
      if (audio.paused) audio.play().catch((err) => { toggle.textContent = err.name; });
      else audio.pause();
    };
    audio.addEventListener('play', () => { toggle.textContent = 'Pause'; toggle.setAttribute('aria-label', 'Pause'); });
    audio.addEventListener('pause', () => { toggle.textContent = 'Play'; toggle.setAttribute('aria-label', 'Play'); });
    audio.addEventListener('timeupdate', () => {
      document.getElementById('bar').value = audio.currentTime / audio.duration || 0;
      document.getElementById('time').textContent = audio.currentTime.toFixed(1) + ' s';
    });
  </script>
</body>
</html>

Der Button ist ein echter <button>, funktioniert also mit der Tastatur, und seine Beschriftung wechselt zwischen Play und Pause. Am Ende der Datei pausiert der Browser das Element und feuert ended, der Button springt also von selbst auf Play zurück. Wenn du eigene Steuerelemente baust, übernimmst du auch, was dir die eingebauten geschenkt haben: Tastaturbedienung, Beschriftungen und eine Lautstärkeregelung.

Barrierefreiheit

Starte Ton nie von selbst. Er unterbricht Screenreader und erschreckt Menschen. Starte Audio mit einem Klick.
Biete ein Transkript an für Podcasts und gesprochenes Audio. Ein Link zu einer Textfassung unter dem Player reicht, und Suchmaschinen können ihn lesen.
Behalte controls oder bau Steuerelemente aus echten Buttons, damit sich das Audio per Tastatur anhalten lässt.

Für Videos mit Ton, Untertiteln und Vorschaubildern siehe die Seite zum HTML Video; <audio> teilt die meisten seiner Attribute und die ganze JavaScript-API.

Häufige Fehler

controls vergessen. Ohne ist das Element unsichtbar, und es sieht aus, als wäre nichts passiert.
Erwarten, dass autoplay funktioniert. Starte die Wiedergabe bei einem Klick und behandle das Promise von play().
Ein falscher Dateipfad oder Typ. Öffne die Datei-URL direkt, um sie zu prüfen, und pass type an das echte Format an (audio/mpeg für MP3).
Jede Datei einer langen Liste laden. Nimm preload="none" oder "metadata".
Hintergrundmusik, die sich nicht stoppen lässt. Gib den Leuten immer eine sichtbare Möglichkeit, sie anzuhalten.

Häufig gestellte Fragen

Wie füge ich einer HTML-Seite Audio hinzu?

Mit <audio src="song.mp3" controls></audio>. Das Attribut controls zeigt den Player des Browsers mit Play-Button, Zeitleiste und Lautstärke. Ohne es ist das Element unsichtbar.

Warum startet mein Audio nicht automatisch?

Browser blockieren Audio, das mit Ton startet, bevor der Nutzer mit der Seite interagiert hat. Starte die Wiedergabe stattdessen bei einem Klick mit audio.play(). Ein stummgeschaltetes Element darf automatisch starten, aber bei Audio bringt das selten etwas.

Welches Audioformat soll ich in HTML verwenden?

MP3 läuft in jedem aktuellen Browser und ist daher die sichere Wahl für eine einzelne Datei. AAC in einer .m4a-Datei wird ebenfalls breit unterstützt. Mit <source>-Elementen bietest du mehr als ein Format an.

Wie spiele ich Audio in HTML in Schleife ab?

Füg das Attribut loop hinzu: <audio src="rain.mp3" controls loop>. Wenn die Datei zu Ende ist, beginnt sie wieder von vorn.

Wie spiele ich mit JavaScript einen Ton ab?

Erzeug oder wähl ein audio-Element aus und ruf play() auf, zum Beispiel new Audio('click.mp3').play() in einem Klick-Handler. play() gibt ein Promise zurück, das abgelehnt wird, wenn der Browser die Wiedergabe blockiert.

Kann ich den HTML-Audio-Player stylen?

Nur ein wenig: Du kannst Breite, margin und display setzen, aber die Buttons darin zeichnet der Browser, und sie sehen in jedem anders aus. Für ein eigenes Aussehen versteckst du die controls und baust eigene mit Buttons und der JavaScript-API für Audio.

Verwandte Konzepte