<audio>: Das Einbetten von Audio-Elementen

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.

Das <audio> HTML-Element wird verwendet, um Soundinhalte in Dokumente einzubetten. Es kann eine oder mehrere Audioquellen enthalten, die durch das src-Attribut oder das <source>-Element repräsentiert werden: Der Browser wählt die am besten geeignete aus. Es kann auch als Ziel für gestreamte Medien genutzt werden, mit einem MediaStream.

Probieren Sie es aus

Das obige Beispiel zeigt eine einfache Verwendung des <audio>-Elements. Ähnlich wie beim <img>-Element geben wir einen Pfad zu den Medien an, die wir über das src-Attribut einbetten möchten; wir können weitere Attribute einschließen, um Informationen anzugeben, wie zum Beispiel, 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 boolesches Attribut: Wenn angegeben, beginnt die Wiedergabe des Audios automatisch, sobald es möglich ist, ohne darauf zu warten, dass die gesamte Audiodatei heruntergeladen wurde.

Hinweis: Websites, die Audio (oder Videos mit einer Tonspur) automatisch abspielen, können für Benutzer eine unangenehme Erfahrung sein, daher sollte dies vermieden werden, wenn möglich. Wenn Sie die Autoplay-Funktionalität anbieten müssen, sollten Sie diese optional machen (erforderlich ist, dass der Benutzer sie explizit aktiviert). Dies kann jedoch nützlich sein, wenn Medienquellen erstellt werden, deren Quelle später vom Benutzer festgelegt wird. Siehe unseren Autoplay-Leitfaden für zusätzliche Informationen zur korrekten Verwendung von Autoplay.

controls

Wenn dieses Attribut vorhanden ist, bietet der Browser Steuerungen an, die dem Benutzer die Kontrolle über die Audiowiedergabe ermöglichen, einschließlich Lautstärke, Suche und Pause/Weiter.

controlslist

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

Erlaubte Werte sind nodownload, nofullscreen und noremoteplayback.

crossorigin

Dieses enumerierte Attribut gibt an, ob CORS verwendet werden soll, um die zugehörige Audiodatei abzurufen. CORS-aktivierte Ressourcen können im <canvas>-Element verwendet werden, ohne verfälscht zu werden. Zulässige Werte sind:

anonymous

Sendet eine Cross-Origin-Anfrage ohne Anmeldeinformationen. Mit anderen Worten, es sendet den Origin: HTTP-Header ohne Cookie, X.509-Zertifikat oder Durchführung von HTTP-Basic-Authentifizierung. Wenn der Server der Ursprungswebsite keine Anmeldeinformationen gibt (indem er den Access-Control-Allow-Origin: HTTP-Header nicht setzt), wird die Ressource verfälscht, und ihre Verwendung eingeschränkt.

use-credentials

Sendet eine Cross-Origin-Anfrage mit Anmeldeinformationen. Mit anderen Worten, es sendet den Origin: HTTP-Header mit einem Cookie, einem Zertifikat oder Durchführung von HTTP-Basic-Authentifizierung. Wenn der Server der Ursprungswebsite keine Anmeldeinformationen gibt (durch den Access-Control-Allow-Credentials: HTTP-Header), wird die Ressource verfälscht und ihre Verwendung eingeschränkt.

Wenn nicht vorhanden, wird die Ressource ohne eine CORS-Anfrage abgerufen (d. h. ohne den Origin: HTTP-Header zu senden), was ihre unverfälschte Verwendung in <canvas>-Elementen verhindert. Bei Ungültigkeit wird es so behandelt, als ob das aufgezählte Schlüsselwort anonymous verwendet würde. Siehe CORS Attribut-Einstellungen für zusätzliche Informationen.

disableremoteplayback

Ein boolesches Attribut, das die Möglichkeit der Fernwiedergabe auf Geräten deaktiviert, die mit kabelgebundenen (HDMI, DVI, etc.) und drahtlosen Technologien (Miracast, Chromecast, DLNA, AirPlay, etc.) verbunden sind. Weitere Informationen finden Sie in diesem vorgeschlagenen Standard.

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

loop

Ein boolesches Attribut: Wenn angegeben, springt der Audioplayer automatisch zum Anfang zurück, wenn das Ende des Audios erreicht ist.

muted

Ein boolesches Attribut, das angibt, ob das Audio initial stummgeschaltet wird. Der Standardwert ist false.

preload

Dieses enumerierte Attribut soll dem Browser einen Hinweis 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 Audiometadaten (z. B. Länge) abgerufen werden.
  • auto: Gibt an, dass die gesamte Audiodatei heruntergeladen werden kann, auch wenn der Benutzer nicht erwartet wird, sie zu nutzen.
  • leerer String: Ein Synonym für den Wert auto.

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 nicht gezwungen, dem Wert dieses Attributs zu folgen; es ist ein bloßer Hinweis.
src

Die URL des einzubettenden Audios. Dies unterliegt HTTP-Zugriffssteuerungen. Dies ist optional; Sie können stattdessen das <source>-Element innerhalb des Audio-Blocks 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 das Medium abspielen, schätzt jedoch, dass nicht genügend Daten geladen wurden, um das Medium bis zu seinem Ende ohne Unterbrechung zur weiteren Zwischenspeicherung abzuspielen.
[`canplaythrough`](/de/docs/Web/API/HTMLMediaElement/canplaythrough_event) Der Browser schätzt, dass er das Medium bis zum Ende abspielen kann, ohne für die Inhaltszwischenspeicherung anzuhalten.
[`complete`](/de/docs/Web/API/OfflineAudioContext/complete_event) Die Wiedergabe eines [`OfflineAudioContext`](/de/docs/Web/API/OfflineAudioContext) wurde beendet.
[`durationchange`](/de/docs/Web/API/HTMLMediaElement/durationchange_event) Das duration-Attribut wurde aktualisiert.
[`emptied`](/de/docs/Web/API/HTMLMediaElement/emptied_event) Das Medium ist leer geworden; zum Beispiel wird dieses Ereignis gesendet, wenn das Medium bereits geladen ist (oder teilweise geladen wurde) und die [`HTMLMediaElement.load`](/de/docs/Web/API/HTMLMediaElement/load)-Methode aufgerufen wird, um es neu zu laden.
[`ended`](/de/docs/Web/API/HTMLMediaElement/ended_event) Die Wiedergabe wurde gestoppt, weil das Ende des Mediums erreicht wurde.
[`loadeddata`](/de/docs/Web/API/HTMLMediaElement/loadeddata_event) Der erste Frame des Mediums wurde geladen.
[`loadedmetadata`](/de/docs/Web/API/HTMLMediaElement/loadedmetadata_event) Die Metadaten wurden geladen.
[`loadstart`](/de/docs/Web/API/HTMLMediaElement/loadstart_event) Wird ausgelöst, wenn der Browser begonnen hat, die Ressource zu laden.
[`pause`](/de/docs/Web/API/HTMLMediaElement/pause_event) Die Wiedergabe wurde pausiert.
[`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 beginnen, nachdem sie pausiert oder aufgrund von Datenmangel verzögert wurde.
[`ratechange`](/de/docs/Web/API/HTMLMediaElement/ratechange_event) Die Wiedergabegeschwindigkeit hat sich geändert.
[`seeked`](/de/docs/Web/API/HTMLMediaElement/seeked_event) Ein Such-Vorgang wurde abgeschlossen.
[`seeking`](/de/docs/Web/API/HTMLMediaElement/seeking_event) Ein Such-Vorgang 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 von Mediendaten wurde ausgesetzt.
[`timeupdate`](/de/docs/Web/API/HTMLMediaElement/timeupdate_event) Die durch das 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 wegen eines vorübergehenden Datenmangels gestoppt.

Nutzungshinweise

Browser unterstützen nicht alle die gleichen Dateitypen und Audio-Codecs; Sie können mehrere Quellen innerhalb verschachtelter <source>-Elemente bereitstellen, 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. Wenn Sie HTTP(S)-URLs verwenden, beachten Sie, 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 Größe der HTML-Datei erhöht.

Sie können auch die Web Audio API verwenden, um Audio-Streams direkt zu generieren und zu manipulieren, anstatt bereits vorhandene 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-Audioverarbeitung 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 substanziellen und gründlichen Leitfaden zu Mediadateitypen und zu den Audiocodecs, die in ihnen verwendet werden können. Auch verfügbar ist ein Leitfaden zu den unterstützten Codecs für Video.

Andere Nutzungshinweise:

  • 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 Ihnen eine präzise Kontrolle über Ihre Audioinhalte zu ermöglichen, feuern HTMLMediaElements viele verschiedene Ereignisse. 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 mit der Wiedergabe zu beginnen oder sie zu manipulieren.
  • <audio>-Elemente können keine Untertitel oder Beschriftungen haben, die ihnen zugewiesen sind, so wie es bei <video>-Elementen der Fall ist. 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 vorhandenes Element wie <notanaudio> ersetzen.

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

Styling mit CSS

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

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 die Positionierung und das Layout zu verbessern, es sei denn, Sie möchten, dass es innerhalb eines Textblocks oder Ähnlichem sitzt.

Sie können die Standardsteuerungen mit Eigenschaften gestalten, die den Block als eine Einheit beeinflussen, so dass Sie ihm zum Beispiel einen border und border-radius, padding, margin usw. geben können. Sie können jedoch nicht die einzelnen Komponenten innerhalb des Audioplayers gestalten (z. B. die Größe der Schaltflächen ändern oder Symbole ändern, die Schrift ändern usw.), und die Steuerungen sind in den verschiedenen Browsern unterschiedlich.

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

Grundlagen zur Videoplayer-Gestaltung bieten einige nützliche Gestaltungs-Techniken – sie sind im Kontext von <video> geschrieben, aber vieles davon ist gleichermaßen auf <audio> anwendbar.

Hinzufügen und Entfernen von Tracks erkennen

Sie können erkennen, wann Tracks 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 Track-List-Objekt innerhalb des <audio>-Elements gesendet, das dem Typ des Tracks entspricht, der dem Element hinzugefügt wurde:

HTMLMediaElement.audioTracks

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

HTMLMediaElement.videoTracks

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

HTMLMediaElement.textTracks

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

Hinweis: Auch wenn es sich um ein <audio>-Element handelt, hat es dennoch Video- und Texttrack-Listen und kann tatsächlich verwendet werden, um Video zu präsentieren, obwohl die Benutzeroberfläche seltsam sein kann.

Um beispielsweise zu erkennen, wann Audiotracks zu oder aus 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 Audiotracks zum oder vom Element hinzugefügt werden, und ruft eine hypothetische Funktion in einem Track-Editor auf, um den Track in der Liste der verfügbaren Tracks des Editors zu registrieren oder zu entfernen.

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

Barrierefreiheit

Audio mit gesprochenem Dialog sollte sowohl Untertitel als auch Transkripte enthalten, die seinen Inhalt genau beschreiben. Untertitel, die mit WebVTT spezifiziert sind, ermöglichen es hörgeschädigten Personen, den Inhalt einer Audioaufnahme zu verstehen, während die Aufnahme abgespielt wird, während Transkripte Personen, die mehr Zeit benötigen, die Möglichkeit geben, den Inhalt der Aufnahme in einem für sie angenehmen Tempo und Format zu überprüfen.

Wenn automatische Untertitelungsdienste genutzt werden, ist es wichtig, den generierten Inhalt zu überprüfen, um sicherzustellen, dass er die Quell-Audioinhalte genau wiedergibt.

Das <audio>-Element unterstützt WebVTT nicht direkt. Sie müssen eine Bibliothek oder ein Framework finden, das die Funktionalität bereitstellt, oder den Code selbst schreiben, um Untertitel anzuzeigen. Eine Option ist, Ihr Audio über ein <video>-Element abzuspielen, das WebVTT unterstützt.

Zusätzlich zu gesprochenem Dialog sollten Untertitel und Transkripte auch Musik und Soundeffekte identifizieren, die wichtige Informationen vermitteln. Dies beinhaltet Emotionen und Ton. Zum Beispiel beachten Sie im unten stehenden WebVTT die Verwendung von eckigen Klammern, um den Zuschauern Ton und emotionale Einblicke zu geben; dies kann helfen, die Stimmung zu etablieren, die sonst durch Musik, nonverbale Geräusche und wichtige Soundeffekte vermittelt wird, und so weiter.

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 Viewer bereitzustellen, 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

Das folgende Beispiel zeigt die einfache Verwendung des <audio>-Elements zum Abspielen einer OGG-Datei. Es wird automatisch abgespielt aufgrund des autoplay-Attributs – wenn die Seite dazu die Erlaubnis hat – und enthält auch einen Fallback-Inhalt.

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

Einzelheiten, wann Autoplay funktioniert, wie man die Berechtigung zur Verwendung von Autoplay erhält und wie und wann es angemessen ist, Autoplay zu verwenden, finden Sie in unserem Autoplay-Leitfaden.

<audio>-Element mit <source>-Element

Dieses Beispiel spezifiziert, welcher Audiotrack durch Verwendung des src-Attributs auf einem verschachtelten <source>-Element eingebettet werden soll, anstatt direkt auf dem <audio>-Element. Es ist immer nützlich, den MIME-Typ der Datei im type-Attribut anzugeben, da der Browser sofort erkennen kann, ob er diese Datei abspielen kann, und keine Zeit daran 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 umfasst mehrere <source>-Elemente. Der Browser versucht, das erste Quell-Element (Opus) zu laden, wenn er es abspielen kann; wenn nicht, fällt er auf das zweite (Vorbis) und schließlich 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 Fließender Inhalt, phrasing content, eingebetteter Inhalt. Wenn es ein controls-Attribut hat: interaktiver Inhalt und fühlbarer Inhalt.
Zulässiger 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.
Sonst: 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 der Start- als auch der End-Tag sind obligatorisch.
Zulässige Eltern Jedes Element, das eingebetteten Inhalt akzeptiert.
Implizierte ARIA-Rolle Keine entsprechende Rolle
Zulässige ARIA-Rollen application
DOM-Schnittstelle [`HTMLAudioElement`](/de/docs/Web/API/HTMLAudioElement)

Spezifikationen

Specification
HTML Standard
# the-audio-element

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch