\<audio>: Das Einbetten-Audio-Element

Baseline Widely available *

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

* Some parts of this feature may have varying levels of support.

Das <audio> HTML Element wird verwendet, um Audioinhalte in Dokumente einzubetten. Es kann eine oder mehrere Audioquellen enthalten, die mit dem src Attribut oder dem <source> Element dargestellt werden: Der Browser wählt die am besten geeignete aus. Es kann auch das Ziel für gestreamte Medien sein, indem ein MediaStream verwendet wird.

Probieren Sie es aus

<figure>
  <figcaption>Listen to the T-Rex:</figcaption>
  <audio controls src="/shared-assets/audio/t-rex-roar.mp3"></audio>
  <a href="/shared-assets/audio/t-rex-roar.mp3"> Download audio </a>
</figure>
figure {
  margin: 0;
}

Das obige Beispiel zeigt die Grundnutzung des <audio> Elements. Ähnlich wie beim <img> Element geben wir einen Pfad zu dem Medium, das wir einbetten wollen, im src Attribut an; wir können andere Attribute einschließen, um Informationen wie Autoplay und Schleifen anzugeben, ob wir die Standard-Audiosteuerungen des Browsers anzeigen möchten, etc.

Der Inhalt innerhalb der öffnenden und schließenden <audio></audio> Tags wird als Fallback in Browsern angezeigt, die das Element nicht unterstützen.

Attribute

Die Attribute dieses Elements umfassen die globalen Attribute.

autoplay

Ein Boolean-Attribut: Wenn angegeben, beginnt die Audiowiedergabe automatisch, sobald sie dies kann, ohne auf das vollständige Herunterladen der Audiodatei zu warten.

Hinweis: Websites, die automatisch Audio (oder Videos mit einer Tonspur) abspielen, können eine unangenehme Erfahrung für Benutzer sein und sollten nach Möglichkeit vermieden werden. Wenn Sie Autoplay-Funktionalität anbieten müssen, sollten Sie diese als Opt-in gestalten (erfordert, dass ein Benutzer sie speziell aktiviert). Dies kann jedoch nützlich sein, wenn Mediendateien erstellt werden, deren Quelle zu einem späteren Zeitpunkt unter Benutzerkontrolle festgelegt wird. Weitere Informationen zur korrekten Nutzung von Autoplay finden Sie in unserem Autoplay Leitfaden.

controls

Wenn dieses Attribut vorhanden ist, bietet der Browser Steuerungen an, um dem Benutzer die Steuerung der Audiowiedergabe zu ermöglichen, einschließlich Lautstärke, Suche und Pause/Fortsetzen der Wiedergabe.

controlslist

Das controlslist Attribut hilft dem Browser, zu bestimmen, welche Steuerungen für das audio Element angezeigt werden sollen, wenn der Browser seine eigenen Steuerungen anzeigt (also, wenn das controls Attribut angegeben ist).

Die zulässigen Werte sind nodownload, nofullscreen und noremoteplayback.

crossorigin

Dieses Aufzählungs- Attribut gibt an, ob CORS verwendet werden soll, um die zugehörige Audiodatei abzurufen. CORS-aktivierte Ressourcen können im <canvas> Element ohne Verfälschung wiederverwendet werden. Die zulässigen Werte sind:

anonymous

Sendet eine Cross-Origin-Anfrage ohne Berechtigung. Das heißt, es sendet den Origin: HTTP-Header ohne Cookie, X.509-Zertifikat oder HTTP-Basisauthentifizierung. Wenn der Server keine Berechtigungen an die Ursprungsseite gibt (indem er den Access-Control-Allow-Origin: HTTP-Header nicht setzt), wird die Ressource verfälscht sein und ihre Nutzung eingeschränkt.

use-credentials

Sendet eine Cross-Origin-Anfrage mit Berechtigung. Das heißt, es sendet den Origin: HTTP-Header mit einem Cookie, einem Zertifikat oder führt HTTP-Basisauthentifizierung durch. Wenn der Server keine Berechtigungen an die Ursprungsseite gibt (durch den Access-Control-Allow-Credentials: HTTP-Header), wird die Ressource verfälscht und ihre Nutzung eingeschränkt.

Wenn nicht vorhanden, wird die Ressource ohne CORS-Anfrage abgerufen (d.h. ohne den Origin: HTTP-Header zu senden), was ihre unverfälschte Nutzung in <canvas> Elementen verhindert. Wenn ungültig, wird es so behandelt, als ob das aufgezählte Schlüsselwort anonymous verwendet wurde. Weitere Informationen finden Sie unter CORS-Einstellungen Attribute.

disableremoteplayback

Ein Boolean-Attribut, das die Fähigkeit der Fernwiedergabe auf Geräten deaktiviert, die über verkabelte (HDMI, DVI, etc.) und drahtlose Technologien (Miracast, Chromecast, DLNA, AirPlay, etc.) angeschlossen sind. Weitere Informationen finden Sie in der vorgeschlagenen Remote Playback API-Spezifikation.

In Safari können Sie x-webkit-airplay="deny" als Fallback verwenden.

loop

Ein Boolean-Attribut: Wenn angegeben, sucht der Audioplayer beim Erreichen des Endes des Audios automatisch zum Anfang zurück.

muted

Ein Boolean-Attribut, das angibt, ob das Audio initial stummgeschaltet wird. Sein Standardwert ist false.

preload

Dieses Aufzählungs- Attribut soll dem Browser einen Hinweis geben, was der Autor als beste Benutzererfahrung betrachtet. Es kann einen der folgenden Werte haben:

  • none: Zeigt an, dass das Audio nicht vorgeladen werden sollte.
  • metadata: Zeigt an, dass nur die Audiometadaten (z.B. Länge) abgerufen werden.
  • auto: Zeigt an, dass die gesamte Audiodatei heruntergeladen werden kann, auch wenn nicht erwartet wird, dass der Benutzer sie verwendet.
  • leerer string: Ein Synonym für den auto Wert.

Der Standardwert ist für jeden Browser unterschiedlich. Die Spezifikation empfiehlt, ihn auf metadata zu setzen.

Hinweis:

  • Das autoplay Attribut hat Vorrang vor preload. Wenn autoplay angegeben ist, müsste der Browser offensichtlich beginnen, das Audio für die Wiedergabe herunterzuladen.
  • Der Browser ist durch die Spezifikation nicht gezwungen, dem Wert dieses Attributs zu folgen; es ist lediglich ein Hinweis.
src

Die URL des einzubettenden Audios. Dies unterliegt der HTTP-Zugriffskontrolle. Dies ist optional; Sie können stattdessen das <source> Element innerhalb des Audiosblocks verwenden, um das einzubettende Audio anzugeben.

Ereignisse

Ereignisname Ausgelöst, wenn
[`audioprocess`](/de/docs/Web/API/ScriptProcessorNode/audioprocess_event) Der Eingabepuffer eines [`ScriptProcessorNode`](/de/docs/Web/API/ScriptProcessorNode) ist bereit zur Verarbeitung.
[`canplay`](/de/docs/Web/API/HTMLMediaElement/canplay_event) Der Browser kann die Medien abspielen, schätzt jedoch, dass nicht genug Daten geladen wurden, um die Medien bis zum Ende abzuspielen, ohne anhalten zu müssen, um weitere Inhalte zu puffern.
[`canplaythrough`](/de/docs/Web/API/HTMLMediaElement/canplaythrough_event) Der Browser schätzt, es kann die Medien bis zum Ende abspielen, ohne zum Puffern von Inhalten anhalten zu müssen.
[`complete`](/de/docs/Web/API/OfflineAudioContext/complete_event) Die Verarbeitung eines [`OfflineAudioContext`](/de/docs/Web/API/OfflineAudioContext) ist abgeschlossen.
[`durationchange`](/de/docs/Web/API/HTMLMediaElement/durationchange_event) Das duration Attribut wurde aktualisiert.
[`emptied`](/de/docs/Web/API/HTMLMediaElement/emptied_event) Die Medien sind leer geworden; z.B. wird dieses Ereignis gesendet, wenn die Medien bereits geladen (oder teilweise geladen) wurden und die [`HTMLMediaElement.load`](/de/docs/Web/API/HTMLMediaElement/load) Methode aufgerufen wird, um sie neu zu laden.
[`ended`](/de/docs/Web/API/HTMLMediaElement/ended_event) Die Wiedergabe wurde gestoppt, weil das Ende der Medien erreicht wurde.
[`loadeddata`](/de/docs/Web/API/HTMLMediaElement/loadeddata_event) Der erste Frame der Medien wurde fertig geladen.
[`loadedmetadata`](/de/docs/Web/API/HTMLMediaElement/loadedmetadata_event) Die Metadaten wurden geladen.
[`loadstart`](/de/docs/Web/API/HTMLMediaElement/loadstart_event) Ausgelöst, wenn der Browser mit dem Laden der Ressource begonnen hat.
[`pause`](/de/docs/Web/API/HTMLMediaElement/pause_event) Die Wiedergabe wurde angehalten.
[`play`](/de/docs/Web/API/HTMLMediaElement/play_event) Die Wiedergabe hat begonnen.
[`playing`](/de/docs/Web/API/HTMLMediaElement/playing_event) Die Wiedergabe ist bereit zu starten, nachdem sie pausiert oder verzögert wurde aufgrund fehlender Daten.
[`ratechange`](/de/docs/Web/API/HTMLMediaElement/ratechange_event) Die Wiedergabegeschwindigkeit hat sich geändert.
[`seeked`](/de/docs/Web/API/HTMLMediaElement/seeked_event) Eine Such-Operation ist abgeschlossen.
[`seeking`](/de/docs/Web/API/HTMLMediaElement/seeking_event) Eine Such-Operation hat begonnen.
[`stalled`](/de/docs/Web/API/HTMLMediaElement/stalled_event) Der Benutzeragent versucht, Mediendaten abzurufen, aber die Daten kommen unerwartet nicht.
[`suspend`](/de/docs/Web/API/HTMLMediaElement/suspend_event) Das Laden der Mediendaten wurde ausgesetzt.
[`timeupdate`](/de/docs/Web/API/HTMLMediaElement/timeupdate_event) Die im currentTime Attribut angegebene Zeit wurde aktualisiert.
[`volumechange`](/de/docs/Web/API/HTMLMediaElement/volumechange_event) Die Lautstärke hat sich geändert.
[`waiting`](/de/docs/Web/API/HTMLMediaElement/waiting_event) Die Wiedergabe wurde gestoppt aufgrund eines temporären Datenmangels.

Verwendungshinweise

Browser unterstützen nicht alle Dateitypen und Audiocodecs; Sie können mehrere Quellen innerhalb verschachtelter <source>-Elemente angeben, und der Browser verwendet dann die erste, die er versteht:

html
<audio controls>
  <source src="myAudio.mp3" type="audio/mpeg" />
  <source src="myAudio.ogg" type="audio/ogg" />
  <p>
    Download <a href="myAudio.mp3" download="myAudio.mp3">MP3</a> or
    <a href="myAudio.ogg" download="myAudio.ogg">OGG</a> audio.
  </p>
</audio>

Die Audioquelle kann auf jede gültige URL gesetzt werden, einschließlich HTTP(S)-URLs und Daten-URLs. Bei Verwendung von HTTP(S)-URLs sollten Sie sich bewusst sein, dass das Caching-Verhalten des Browsers beeinflusst, wie oft die Datei vom Server angefordert wird. Daten-URLs betten die Audiodaten direkt in das HTML ein, was für kleine Audiodateien nützlich sein kann, aber nicht für größere Dateien empfohlen wird, da dies die Dateigröße des HTML erhöht.

Wenn <source>-Elemente verwendet werden, versucht der Browser, jede Quelle nacheinander zu laden. Wenn eine Quelle fehlschlägt (z.B. aufgrund einer ungültigen URL oder eines nicht unterstützten Formats), wird die nächste Quelle versucht, und so weiter. Ein error-Ereignis wird auf dem <audio>-Element ausgelöst, nachdem alle Quellen fehlgeschlagen sind; error-Ereignisse werden nicht bei jedem einzelnen <source>-Element ausgelöst.

Sie können auch die Web-Audio-API verwenden, um direkt Audiodatenströme aus JavaScript-Code zu erzeugen und zu manipulieren, anstatt vorab vorhandene Audiodateien zu streamen. Sie können das srcObject in JavaScript auf ein MediaStream Objekt setzen. Dies wird häufig für Live-Audiostreams oder Echtzeit-Audiobearbeitung verwendet.

js
const audioElement = document.querySelector("audio");
navigator.mediaDevices
  .getUserMedia({ audio: true })
  .then((stream) => {
    audioElement.srcObject = stream;
  })
  .catch((error) => {
    console.error("Error accessing the microphone", error);
  });

Beachten Sie, dass MediaStream-Quellen Einschränkungen haben: Sie sind nicht durchsuchbar und unterstützen nur eine begrenzte Anzahl von Codecs.

Wir bieten einen umfassenden und gründlichen Leitfaden zu Medientypen und den Audiocodecs, die in ihnen verwendet werden können. Auch verfügbar ist ein Leitfaden der unterstützten Codecs für Videos.

Weitere Verwendungshinweise:

  • Wenn Sie das controls Attribut nicht angeben, enthält der Audioplayer nicht die Standardsteuerungen des Browsers. Sie können jedoch Ihre eigenen benutzerdefinierten Steuerungen mit JavaScript und der HTMLMediaElement API erstellen.
  • Um präzise Kontrolle über Ihre Audioinhalte zu ermöglichen, lösen HTMLMediaElements viele verschiedene Ereignisse aus. Dies bietet auch eine Möglichkeit, den Abrufprozess des Audios zu überwachen, damit Sie nach Fehlern suchen oder erkennen können, wann genug verfügbar ist, um es abzuspielen oder zu manipulieren.
  • <audio> Elemente können keine Untertitel oder Beschreibungen zugeordnet haben wie <video> Elemente. Siehe WebVTT und Audio von Ian Devlin für nützliche Informationen und Workarounds.
  • Um den Fallback-Inhalt in Browsern zu testen, die das Element unterstützen, können Sie <audio> durch ein nicht existierendes Element wie <notanaudio> ersetzen.

Eine gute allgemeine Informationsquelle zur Verwendung von HTML <audio> ist das HTML-Video und Audio Anfänger-Tutorial.

Gestaltung mit CSS

Das <audio> Element hat keine eigene visuelle Ausgabe, es sei denn, das controls Attribut ist angegeben, in welchem Fall die Standardsteuerungen des Browsers angezeigt werden.

Die Standardsteuerungen haben standardmäßig einen display Wert von inline, und es ist oft eine gute Idee, den Wert auf block zu setzen, um die Kontrolle über Positionierung und Layout zu verbessern, es sei denn, Sie möchten, dass er in einem Textblock oder ähnlichem sitzt.

Sie können die Standardsteuerungen mit Eigenschaften gestalten, die den Block als eine einzige Einheit betreffen, so dass Sie ihm z.B. eine border und border-radius, padding, margin, etc. geben können. Sie können jedoch nicht die einzelnen Komponenten innerhalb des Audioplayers gestalten (z.B. die Schaltflächengröße oder Symbole ändern, die Schriftart ändern etc.), und die Steuerungen sind auf den verschiedenen Browsern unterschiedlich.

Um ein einheitliches Erscheinungsbild über Browser hinweg zu erreichen, müssen Sie benutzerdefinierte Steuerungen erstellen; diese können in beliebiger Weise markiert und gestaltet werden, und dann kann JavaScript zusammen mit der HTMLMediaElement API verwendet werden, um ihre Funktionalität zu verbinden.

Grundlagen der Videoplayer-Gestaltung bietet einige nützliche Gestaltungstechniken — es ist im Kontext von <video> geschrieben, aber vieles davon ist gleichermaßen auf <audio> anwendbar.

Erkennen der Hinzufügung und Entfernung von Spuren

Sie können erkennen, wann Spuren zu einem <audio> Element hinzugefügt oder entfernt werden, indem Sie die addtrack und removetrack Ereignisse verwenden. Diese Ereignisse werden jedoch nicht direkt an das <audio> Element selbst gesendet. Stattdessen werden sie an das Objekt der Spurliste innerhalb des <audio> Elements gesendet, das dem Spurityp entspricht, der dem Element hinzugefügt wurde:

HTMLMediaElement.audioTracks

Eine AudioTrackList, die alle Audiospuren des Medienelements enthält. Sie können einen Listener für addtrack auf diesem Objekt hinzufügen, um benachrichtigt zu werden, wenn neue Audiospuren zu dem Element hinzugefügt werden.

HTMLMediaElement.videoTracks

Fügen Sie diesem VideoTrackList Objekt einen addtrack Listener hinzu, um informiert zu werden, wenn Videospuren zu dem Element hinzugefügt werden.

HTMLMediaElement.textTracks

Fügen Sie diesem TextTrackList einen addtrack Ereignis-Listener hinzu, um benachrichtigt zu werden, wenn neue Textspuren zu dem Element hinzugefügt werden.

Hinweis: Selbst wenn es ein <audio> Element ist, hat es immer noch Video- und Textspurlisten und kann tatsächlich verwendet werden, um Video darzustellen, obwohl die Benutzeroberflächenimplikationen seltsam sein können.

Um beispielsweise zu erkennen, wann Audiospuren zu oder von einem <audio> Element hinzugefügt oder entfernt werden, können Sie Code wie diesen verwenden:

js
const elem = document.querySelector("audio");

elem.audioTrackList.onaddtrack = (event) => {
  trackEditor.addTrack(event.track);
};

elem.audioTrackList.onremovetrack = (event) => {
  trackEditor.removeTrack(event.track);
};

Dieser Code überwacht, wann Audiospuren zum Element hinzugefügt oder von ihm entfernt werden, und ruft eine hypothetische Funktion in einem Spureneditor auf, um die Spur in der Liste der verfügbaren Spuren des Editors zu registrieren und zu entfernen.

Sie können auch addEventListener() verwenden, um die addtrack und removetrack Ereignisse zu hören.

Barrierefreiheit

Audio mit gesprochenem Dialog sollte sowohl Untertitel als auch Transkripte bereitstellen, die seinen Inhalt genau beschreiben. Untertitel, die mit WebVTT angegeben werden, ermöglichen es Personen mit Hörbehinderungen, den Inhalt einer Audioaufnahme zu verstehen, während die Aufnahme abgespielt wird, während Transkripte Personen ermöglichen, die zusätzliche Zeit benötigen, um den Inhalt der Aufnahme in einem Tempo und Format zu überprüfen, das ihnen angenehm ist.

Wenn automatische Untertitelungsdienste verwendet werden, ist es wichtig, den generierten Inhalt zu überprüfen, um sicherzustellen, dass er den Quellaudioinhalt genau wiedergibt.

Das <audio> Element unterstützt WebVTT nicht direkt. Sie müssen eine Bibliothek oder ein Framework finden, das diese Möglichkeit bietet, oder den Code selbst schreiben, um Untertitel anzuzeigen. Eine Möglichkeit besteht darin, Ihr Audio mit einem <video> Element abzuspielen, das WebVTT unterstützt.

Neben gesprochenem Dialog sollten Untertitel und Transkripte auch Musik und Soundeffekte identifizieren, die wichtige Informationen kommunizieren. Dazu gehören Emotion und Ton. Zum Beispiel wird im untenstehenden WebVTT die Verwendung von eckigen Klammern hervorgehoben, um dem Betrachter Ton und emotionale Einblicke zu geben; dies kann helfen, die Stimmung zu vermitteln, die ansonsten durch Musik, nicht verbale Geräusche und entscheidende Soundeffekte bereitgestellt wird.

1
00:00:00 --> 00:00:45
[Energetic techno music]

2
00:00:46 --> 00:00:51
Welcome to the Time Keeper's podcast! In this episode we're discussing which Swisswatch is a wrist switchwatch?

16
00:00:52 --> 00:01:02
[Laughing] Sorry! I mean, which wristwatch is a Swiss wristwatch?

Es ist auch eine gute Praxis, etwas Inhalt (wie den direkten Downloadlink) als Fallback für Benutzer anzubieten, die einen Browser verwenden, in dem das <audio> Element nicht unterstützt wird:

html
<audio controls>
  <source src="myAudio.mp3" type="audio/mpeg" />
  <source src="myAudio.ogg" type="audio/ogg" />
  <p>
    Download <a href="myAudio.mp3">MP3</a> or
    <a href="myAudio.ogg" download="myAudio.ogg">OGG</a> audio.
  </p>
</audio>

Beispiele

Grundlegende Nutzung

Dieses Beispiel zeigt die grundlegende Nutzung des <audio> Elements zum Abspielen einer OGG-Datei. Es wird wegen des autoplay Attributs automatisch abgespielt – wenn die Seite die Erlaubnis dazu hat – und enthält auch Fallback-Inhalt.

html
<!-- Basic audio playback -->
<audio src="AudioTest.ogg" autoplay>
  <a href="AudioTest.ogg" download="AudioTest.ogg">Download OGG audio</a>.
</audio>

Für Details darüber, wann Autoplay funktioniert, wie Sie die Erlaubnis zur Verwendung von Autoplay erhalten und wie und wann es angemessen ist, Autoplay zu verwenden, siehe unseren Autoplay Leitfaden.

<audio> Element mit <source> Element

Dieses Beispiel gibt an, welcher Audiotrack mit dem src Attribut auf einem verschachtelten <source> Element eingebettet werden soll, anstatt direkt auf dem <audio> Element. Es ist immer ratsam, den MIME-Typ der Datei im type Attribut anzugeben, da der Browser sofort feststellen kann, ob er diese Datei abspielen kann, und keine Zeit damit verschwendet, wenn nicht.

html
<audio controls>
  <source src="foo.wav" type="audio/wav" />
  <a href="foo.wav" download="foo.wav">Download WAV audio</a>.
</audio>

<audio> mit mehreren <source> Elementen

Dieses Beispiel enthält mehrere <source> Elemente. Der Browser versucht, das erste Quell-Element (Opus) zu laden, wenn er in der Lage ist, es abzuspielen; wenn nicht, fällt er auf das zweite (Vorbis) und schließlich auf MP3 zurück:

html
<audio controls>
  <source src="foo.opus" type="audio/ogg; codecs=opus" />
  <source src="foo.ogg" type="audio/ogg; codecs=vorbis" />
  <source src="foo.mp3" type="audio/mpeg" />
</audio>

Technische Zusammenfassung

Inhaltskategorien Flussinhalt, Phraseninhalt, eingebetteter Inhalt. Wenn es ein controls Attribut hat: interaktiver Inhalt und fühlbarer Inhalt.
Erlaubter Inhalt Wenn das Element ein src Attribut hat: null oder mehr <track> Elemente, gefolgt von transparentem Inhalt, der keine <audio> oder <video> Medienelemente enthält.
Andernfalls: null oder mehr <source> Elemente, gefolgt von null oder mehr <track> Elementen, gefolgt von transparentem Inhalt, der keine <audio> oder <video> Medienelemente enthält.
Tag-Auslassung Keine, sowohl das eröffnende als auch das schließende Tag sind obligatorisch.
Erlaubte Eltern Jedes Element, das eingebetteten Inhalt akzeptiert.
Implizite ARIA-Rolle Keine entsprechende Rolle
Erlaubte ARIA-Rollen application
DOM-Schnittstelle [`HTMLAudioElement`](/de/docs/Web/API/HTMLAudioElement)

Spezifikationen

Specification
HTML
# the-audio-element

Browser-Kompatibilität

Siehe auch