<audio> HTML Audio-Element einbetten

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 grundlegende Verwendung des <audio> Elements. Ähnlich wie beim <img> Element geben wir einen Pfad zu den Medien an, die wir im src Attribut einbetten möchten; wir können auch andere Attribute einfügen, um Informationen wie zum Beispiel anzugeben, ob es automatisch abgespielt und wiederholt werden soll, ob wir die Standard-Audiosteuerungen des Browsers anzeigen möchten usw.

Der Inhalt zwischen den ö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 das Audio automatisch mit der Wiedergabe, sobald es möglich ist, ohne darauf zu warten, dass die gesamte Audiodatei heruntergeladen ist.

Hinweis: Websites, die automatisch Audio (oder Videos mit einem Audiotrack) abspielen, können für Benutzer eine unangenehme Erfahrung sein und sollten nach Möglichkeit vermieden werden. Wenn Sie die Autoplay-Funktionalität anbieten müssen, sollten Sie es opt-in machen (indem der Benutzer es spezifisch aktivieren muss). Dies kann jedoch nützlich sein, wenn Medienelemente erstellt werden, deren Quelle später, unter Benutzereingabe, festgelegt wird. Siehe unseren Autoplay-Leitfaden für weitere Informationen zur korrekten Verwendung von Autoplay.

Hinweis: Audio mit dem loading="lazy" Attribut wird nicht heruntergeladen und automatisch abgespielt, bis die Steuerungen der Medien in der Nähe oder innerhalb des Viewports sind. Lazy-geladenes Audio ohne das controls Attribut wird nicht automatisch abgespielt.

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, Suchlauf und Pause/Fortsetzen der Wiedergabe.

controlslist

Das controlslist Attribut hilft dem Browser, auszuwählen, welche Steuerungen für das audio Element angezeigt werden sollen, wann immer der Browser sein eigenes Set von Steuerungen zeigt (d.h. wenn das controls Attribut angegeben wird).

Die erlaubten Werte sind nodownload, nofullscreen und noremoteplayback.

crossorigin

Dieses enumerierte Attribut gibt an, ob CORS verwendet wird, um die zugehörige Audiodatei abzurufen. CORS-aktivierte Ressourcen können im <canvas> Element wiederverwendet werden, ohne verunreinigt zu sein. Die erlaubten Werte sind:

anonymous

Sendet eine Cross-Origin-Anfrage ohne eine Berechtigung. Mit anderen Worten, es sendet den Origin: HTTP-Header ohne ein Cookie, X.509-Zertifikat oder Durchführung einer HTTP-Basisauthentifizierung. Wenn der Server der Ursprungsseite keine Berechtigungen erteilt (indem er den Access-Control-Allow-Origin: HTTP-Header nicht festlegt), wird die Ressource verunreinigt und ihre Nutzung eingeschränkt.

use-credentials

Sendet eine Cross-Origin-Anfrage mit einer Berechtigung. Mit anderen Worten, es sendet den Origin: HTTP-Header zusammen mit einem Cookie, einem Zertifikat oder Durchführung einer HTTP-Basisauthentifizierung. Wenn der Server der Ursprungsseite keine Berechtigungen erteilt (durch Access-Control-Allow-Credentials: HTTP-Header), wird die Ressource verunreinigt und ihre Nutzung eingeschränkt.

Wenn es nicht vorhanden ist, wird die Ressource ohne eine CORS-Anfrage abgerufen (d.h. ohne den Origin: HTTP-Header zu senden), was die nicht-verunreinigte Nutzung in <canvas> Elementen verhindert. Wenn es ungültig ist, wird es behandelt, als wäre das enumerierte Schlüsselwort anonymous verwendet worden. Siehe CORS-Einstellungen-Attribute für zusätzliche Informationen.

disableremoteplayback

Ein Boolean-Attribut, das verwendet wird, um die Fähigkeit der Fernwiedergabe in Geräten zu deaktivieren, die mit kabelgebundenen (HDMI, DVI usw.) und drahtlosen Technologien (Miracast, Chromecast, DLNA, AirPlay usw.) verbunden sind. Siehe die vorgeschlagene Remote Playback API-Spezifikation für weitere Informationen.

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

loading

Gibt an, wie der Browser das Audio laden soll:

eager

Lädt das Audio sofort, unabhängig davon, ob das Audio sich derzeit innerhalb des sichtbaren Viewports befindet oder nicht (dies ist der Standardwert).

lazy

Verzögert das Laden des Audios, bis die Steuerungen eine berechnete Entfernung vom Viewport erreichen, wie es der Browser definiert.

Hinweis: Damit Audio-Elemente sichtbar mit dem Viewport interagieren, müssen sie sichtbar sein. Browser verwenden das controls Attribut, um Audio-Elemente sichtbar zu machen, daher wird es für lazy loading benötigt. Lazy-geladenes Audio ohne das controls Attribut wird nicht geladen.

Lazy loading vermeidet das Netzwerk- und Speicher-Bandbreitenbedarfs, das erforderlich ist, um das Audio zu verarbeiten, bis es mit begründeter Sicherheit benötigt wird. Dies verbessert die Leistung in den meisten typischen Anwendungsfällen.

Lazy-geladenes Audio, das sich im sichtbaren Viewport befindet, ist möglicherweise noch nicht heruntergeladen, wenn das load Ereignis im Fenster ausgelöst wird. Dies liegt daran, dass das Ereignis basierend auf eager-geladenem Audio ausgelöst wird — lazy-geladenes Audio wird nicht betrachtet, selbst wenn es sich beim ersten Laden der Seite im sichtbaren Viewport befindet.

Das Laden wird nur verzögert, wenn JavaScript aktiviert ist. Dies ist eine Maßnahme gegen Tracking, denn wenn ein Benutzeragent Lazy Loading unterstützt, wenn Skripting deaktiviert ist, wäre es dennoch möglich, die ungefähre Scrollposition eines Benutzers während einer Sitzung zu verfolgen, indem strategisch Audio in der Markup einer Seite platziert wird, sodass ein Server nachverfolgen kann, wie viele Audioanforderungen gestellt werden und wann.

Hinweis: Das loading="lazy" Attribut wirkt sich auch auf das autoplay Attribut aus, wie in diesem Abschnitt auf dieser Seite beschrieben.

loop

Ein Boolean-Attribut: Wenn angegeben, sucht der Audio-Player automatisch zu Beginn zurück, wenn das Ende des Audios erreicht ist.

muted

Ein Boolean-Attribut, das angibt, ob das Audio anfänglich stummgeschaltet wird. Der Standardwert ist false.

preload

Dieses enumerierte Attribut soll dem Browser einen Hinweis darauf geben, was der Autor für die beste Benutzererfahrung hält. Es kann einen der folgenden Werte haben:

• none: Gibt an, dass das Audio nicht vorgeladen werden soll.
• metadata: Gibt an, dass nur Audiodaten (z. B. Länge) abgerufen werden.
• auto: Gibt an, dass die gesamte Audiodatei heruntergeladen werden kann, auch wenn der Benutzer voraussichtlich nicht verwendet wird.
• leerer String: Ein Synonym zum auto Wert.

Der Standardwert ist in jedem Browser unterschiedlich. Die Spezifikation rät, ihn auf metadata zu setzen.

Hinweis:

• Audio mit dem loading="lazy" Attribut wird das preload Verhalten erst anwenden, wenn die Audio-Steuerungen nahe oder innerhalb des Viewports sind.
• 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 nicht gezwungen, die Wertangabe dieses Attributs zu befolgen; es ist lediglich ein Hinweis.

src

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

Ereignisse

audioprocess

Der Eingabepuffer eines ScriptProcessorNode ist bereit für die Verarbeitung.

canplay

Der Browser kann die Medien abspielen, schätzt jedoch, dass nicht genügend Daten geladen wurden, um die Medien bis zu ihrem Ende abzuspielen, ohne für weiteres Puffern der Inhalte anzuhalten.

canplaythrough

Der Browser schätzt, dass er die Medien bis zu ihrem Ende abspielen kann, ohne für das Puffern von Inhalten anzuhalten.

complete

Die Verarbeitung eines OfflineAudioContext ist abgeschlossen.

durationchange

Das duration Attribut wurde aktualisiert.

emptied

Die Medien sind leer geworden; zum Beispiel wird dieses Ereignis gesendet, wenn die Medien bereits geladen (oder teilweise geladen) sind und die Methode HTMLMediaElement.load aufgerufen wird, um sie erneut zu laden.

ended

Die Wiedergabe wurde gestoppt, weil das Ende der Medien erreicht wurde.

loadeddata

Der erste Frame der Medien wurde fertig geladen.

loadedmetadata

Die Metadaten wurden geladen.

loadstart

Wird ausgelöst, wenn der Browser begonnen hat, die Ressource zu laden.

pause

Die Wiedergabe wurde pausiert.

play

Die Wiedergabe hat begonnen.

playing

Die Wiedergabe ist bereit, nach einer Pause oder Verzögerung aufgrund fehlender Daten zu starten.

ratechange

Die Wiedergabegeschwindigkeit wurde geändert.

seeked

Eine Such-Operation wurde abgeschlossen.

seeking

Eine Such-Operation begann.

stalled

Der Benutzeragent versucht, Mediendaten zu holen, aber Daten sind unerwartet nicht verfügbar.

suspend

Das Laden von Mediendaten wurde ausgesetzt.

timeupdate

Die durch das currentTime Attribut angezeigte Zeit wurde aktualisiert.

volumechange

Die Lautstärke wurde geändert.

waiting

Die Wiedergabe wurde abgebrochen, weil vorübergehend keine Daten verfügbar sind.

Nutzungshinweise

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

<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 Data-URLs. Bei der Verwendung von HTTP(S)-URLs beachten Sie bitte, dass das Caching-Verhalten des Browsers beeinflusst, wie oft die Datei vom Server angefordert wird. Data-URLs betten die Audiodaten direkt im HTML ein, was für kleine Audiodateien nützlich sein kann, jedoch nicht für größere Dateien empfohlen wird, da es die HTML-Dateigröße erhöht.

Wenn Sie <source> Elemente verwenden, 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 usw. Ein error-Ereignis wird ausgelöst, wenn alle Quellen fehlgeschlagen sind; error-Ereignisse werden nicht für jedes einzelne <source> Element ausgelöst.

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

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 können nicht durchsucht werden und unterstützen nur einen begrenzten Satz von Codecs.

Wir bieten einen umfassenden Leitfaden zu Mediendateitypen und den Audiocodecs, die in ihnen verwendet werden können. Ebenfalls verfügbar ist ein Leitfaden zu den für Video unterstützten Codecs.

Andere Nutzungshinweise:

• Wenn Sie das controls Attribut nicht angeben, wird der Audio-Player nicht die Standard-Steuerungen des Browsers enthalten. Sie können jedoch Ihre eigenen benutzerdefinierten Steuerungen mit JavaScript und der HTMLMediaElement API erstellen.
• Um eine präzise Kontrolle über Ihre Audioinhalte zu ermöglichen, lösen HTMLMediaElements viele verschiedene Ereignisse aus. Dadurch erhalten Sie auch eine Möglichkeit, den Abrufprozess des Audios zu überwachen, sodass Sie Fehler oder feststellen können, wann genug zum Abspielen oder Manipulieren zur Verfügung steht.
• <audio> Elemente können keine Untertitel oder Beschriftungen zugeordnet werden, wie es <video> Elemente können. Siehe WebVTT und Audio von Ian Devlin für einige 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ängertutorial.

Styling mit CSS

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

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

Sie können die Standard-Steuerungen mit Eigenschaften stylen, die den Block als eine einzelne Einheit betreffen, sodass Sie ihm beispielsweise eine border und border-radius, padding, margin usw. geben können. Sie können jedoch nicht die einzelnen Komponenten im Audio-Player stylen (z. B. die Schaltflächengröße oder Symbole ändern, die Schriftart ändern usw.), und die Steuerungen sind je nach Browser unterschiedlich.

Um ein konsistentes Erscheinungsbild über die Browser hinweg zu erhalten, müssen Sie benutzerdefinierte Steuerungen erstellen; diese können nach Belieben markiert und gestylt werden, und dann kann JavaScript zusammen mit der HTMLMediaElement API verwendet werden, um ihre Funktionalität zu verbinden.

Video-Player-Styling-Grundlagen bietet einige nützliche Styling-Techniken — es ist im Kontext von <video> geschrieben, aber vieles davon gilt gleichermaßen für <audio>.

Hinzufügen und Entfernen von Tracks erkennen

Sie können erkennen, wann Tracks zu einem <audio> Element hinzugefügt und 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 Track-Listenobjekt innerhalb des <audio> Elements gesendet, das dem hinzugefügten Tracketyp entspricht:

HTMLMediaElement.audioTracks

Eine AudioTrackList, die alle Audio-Tracks des Medienelements enthält. Sie können einen Listener für addtrack an dieses Objekt hinzufügen, um benachrichtigt zu werden, wenn neue Audio-Tracks zum Element hinzugefügt werden.

HTMLMediaElement.videoTracks

Fügen Sie diesem VideoTrackList Objekt einen addtrack Listener hinzu, um informiert zu werden, wann Video-Tracks zum Element hinzugefügt werden.

HTMLMediaElement.textTracks

Fügen Sie diesem TextTrackList einen addtrack Listener hinzu, um benachrichtigt zu werden, wenn neue Text-Tracks zum Element hinzugefügt werden.

Zum Beispiel, um zu erkennen, wann Audio-Tracks zu oder entfernt werden, können Sie Code wie diesen verwenden:

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 Audio-Tracks zum Element hinzugefügt oder entfernt werden und ruft eine hypothetische Funktion auf einem Track-Editor auf, um den Track zur verfügbaren Track-Liste des Editors hinzuzufügen oder zu entfernen.

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

Barrierefreiheit

Audio mit gesprochenem Dialog sollte sowohl Untertitel als auch Transkriptionen enthalten, die seinen Inhalt genau beschreiben. Untertitel, die mit WebVTT angegeben werden, ermöglichen es Menschen mit Hörbehinderung, den Inhalt einer Audioaufnahme bei der Wiedergabe zu verstehen, während Transkriptionen Menschen, die mehr Zeit benötigen, die Möglichkeit geben, den Inhalt in einem für sie komfortablen Tempo und Format zu überprüfen.

Wenn automatische Untertitelungsdienste verwendet werden, ist es wichtig, den generierten Inhalt zu überprüfen, um sicherzustellen, dass er genau den Quellton repräsentiert.

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

Zusätzlich zu gesprochenem Dialog sollten Untertitel und Transkriptionen auch Musik und Soundeffekte identifizieren, die wichtige Informationen kommunizieren. Dazu gehören Emotionen und Ton. Zum Beispiel, im untenstehenden WebVTT, beachten Sie die Verwendung von eckigen Klammern, um den Ton und das emotionale Verständnis des Zuschauers zu unterstützen; dies kann helfen, die Stimmung darzustellen, die normalerweise durch Musik, nonverbale Geräusche und entscheidende Soundeffekte vermittelt 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 Download-Link) als Fallback für Zuschauer bereitzustellen, die einen Browser verwenden, in dem das <audio> Element nicht unterstützt wird:

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

• Web Video Text Tracks Format (WebVTT)
• WebAIM: Untertitel, Transkriptionen und Audiodiskriptionen
• MDN Verständnis der WCAG, Leitfaden 1.2 Erklärungen
• Verstehen des Erfolgs-Kriteriums 1.2.1 | W3C Understanding WCAG 2.0
• Verstehen des Erfolgs-Kriteriums 1.2.2 | W3C Understanding WCAG 2.0

Beispiele

Grundlegende Verwendung

Das folgende Beispiel zeigt die grundlegende Verwendung des <audio> Elements zur Wiedergabe einer OGG-Datei. Es wird aufgrund des autoplay Attributs automatisch abgespielt—wenn die Seite die Berechtigung dazu hat—und enthält auch Fallback-Inhalt.

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

Für Details, wann Autoplay funktioniert, wie man die Erlaubnis für die Nutzung von Autoplay erhält und wie und wann es angemessen ist, Autoplay zu nutzen, siehe unseren Autoplay-Leitfaden.

<audio> Element mit <source> Element

Dieses Beispiel gibt an, welcher Audiotrack mit dem src Attribut auf einem verschachtelten <source> Element und nicht direkt auf dem <audio> Element eingebettet werden soll. Es ist immer nützlich, den MIME-Typ der Datei innerhalb des type Attributs anzugeben, da der Browser sofort erkennen kann, ob er diese Datei abspielen kann, und keine Zeit damit verschwenden muss, wenn nicht.

<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 Quellen-Element (Opus) zu laden, wenn er es abspielen kann; wenn nicht, fällt er auf das zweite (Vorbis) und schließlich auf MP3 zurück:

<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

Spezifikationen

Browser-Kompatibilität

Siehe auch

• Web-Medien-Technologien

  • Medien-Container-Formate (Dateitypen)
  • Leitfaden zu Audiocodecs, die im Web verwendet werden

• Web-Audio-API

• HTMLAudioElement

• <source>
• <video>

• Lernbereich: HTML Video und Audio

• Grundlagen der plattformübergreifenden Audio-Arbeit