<audio>: Das Audio-Einbettungs-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 Audio-Inhalte in Dokumente einzubetten. Es kann eine oder mehrere Audioquellen enthalten, die durch das src
Attribut oder das <source>
Element dargestellt werden: Der Browser wählt die am besten geeignete aus. Es kann auch das Ziel für gestreamte Medien sein, unter Verwendung eines MediaStream
.
Probieren Sie es aus
Das obige Beispiel zeigt die grundlegende Verwendung des <audio>
Elements. Ähnlich dem <img>
Element fügen wir einen Pfad zur Mediendatei, die wir einbetten möchten, innerhalb des src
Attributs ein; wir können andere Attribute einfügen, um Informationen anzugeben, wie z.B. ob wir es automatisch abspielen und wiederholen möchten, 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 beinhalten die globalen Attribute.
autoplay
-
Ein Boolean-Attribut: Wenn angegeben, wird die Wiedergabe des Audios automatisch beginnen, 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 als unangenehm empfunden werden und sollten nach Möglichkeit vermieden werden. Wenn Sie die Funktion zum automatischen Abspielen anbieten müssen, sollten Sie diese als Opt-in-Funktion gestalten (was erfordert, dass ein Benutzer sie speziell aktiviert). Es kann jedoch nützlich sein, Medien-Elemente zu erstellen, deren Quelle zu einem späteren Zeitpunkt unter der Kontrolle des Benutzers festgelegt wird. Siehe unseren Autoplay-Leitfaden für zusätzliche Informationen darüber, wie man Autoplay richtig verwendet.
controls
-
Wenn dieses Attribut vorhanden ist, bietet der Browser Steuerungen an, mit denen der Benutzer die Audiowiedergabe steuern kann, einschließlich Lautstärke, Suche und Pause/Wiederaufnahme der Wiedergabe.
controlslist
-
Das
controlslist
Attribut hilft, wenn angegeben, dem Browser, auszuwählen, welche Steuerungen für dasaudio
Element angezeigt werden sollen, wann immer der Browser sein eigenes Set von Steuerungen anzeigt (d.h. wenn dascontrols
Attribut angegeben ist).Die zulässigen Werte sind
nodownload
,nofullscreen
undnoremoteplayback
. crossorigin
-
Dieses aufzählbare Attribut gibt an, ob CORS verwendet werden soll, um die zugehörige Audiodatei abzurufen. CORS-fähige Ressourcen können im
<canvas>
Element wiederverwendet werden, ohne dass sie verfälscht werden. Die zulässigen Werte sind:anonymous
-
Sendet eine Cross-Origin-Anfrage ohne Berechtigungsnachweis. Mit anderen Worten, es wird der
Origin:
HTTP-Header gesendet, aber ohne Cookie, X.509-Zertifikat oder Durchführung einer HTTP-Basis-Authentifizierung. Wenn der Server dem Ursprungssite keine Anmeldeinformationen gibt (indem er denAccess-Control-Allow-Origin:
HTTP-Header nicht setzt), wird die Ressource verfälscht und ihre Nutzung eingeschränkt. use-credentials
-
Sendet eine Cross-Origin-Anfrage mit Berechtigungsnachweis. Mit anderen Worten, es wird der
Origin:
HTTP-Header zusammen mit einem Cookie, einem Zertifikat oder Durchführung einer HTTP-Basis-Authentifizierung gesendet. Wenn der Server der Ursprungssite keine Anmeldeinformationen gibt (über denAccess-Control-Allow-Credentials:
HTTP-Header), wird die Ressource verfälscht und ihre Nutzung eingeschränkt.
Wenn nicht vorhanden, wird die Ressource ohne eine CORS-Anfrage abgerufen (d.h. ohne Senden des
Origin:
HTTP-Headers), wodurch ihre unverfälschte Verwendung in<canvas>
Elementen verhindert wird. Falls ungültig, wird es so behandelt, als ob das aufgezählte Schlüsselwort anonymous verwendet worden wäre. Siehe CORS-Einstellungen Attribute für weitere Informationen. disableremoteplayback
-
Ein Boolean-Attribut, das verwendet wird, um die Fähigkeit zur Fernwiedergabe in Geräten zu deaktivieren, die mit Kabeltechnologien (HDMI, DVI, etc.) und drahtlosen Technologien (Miracast, Chromecast, DLNA, AirPlay, etc.) verbunden sind. Siehe diese vorgeschlagene Spezifikation für weitere Informationen.
In Safari können Sie
x-webkit-airplay="deny"
als Fallback verwenden. loop
-
Ein Boolean-Attribut: Wenn angegeben, wird der Audioplayer beim Erreichen des Endes des Audios automatisch zum Anfang zurückkehren.
muted
-
Ein Boolean-Attribut, das angibt, ob das Audio anfangs stummgeschaltet wird. Sein Standardwert ist
false
. preload
-
Dieses aufzählbare 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
: Zeigt an, dass das Audio nicht vorgeladen werden sollte.metadata
: Zeigt an, dass nur Audio-Metadaten (z.B. Länge) abgerufen werden.auto
: Zeigt an, dass die gesamte Audiodatei heruntergeladen werden kann, auch wenn der Benutzer sie möglicherweise nicht verwendet.- leer Zeichenkette: Ein Synonym für den Wert
auto
.
Der Standardwert ist für jeden Browser unterschiedlich. Die Spezifikation rät, ihn auf
metadata
zu setzen.Hinweis:
- Das
autoplay
Attribut hat Vorrang vorpreload
. Fallsautoplay
angegeben ist, müsste der Browser offensichtlich anfangen, das Audio für die Wiedergabe herunterzuladen. - Der Browser ist durch die Spezifikation nicht gezwungen, den Wert dieses Attributs zu befolgen; es ist lediglich ein Hinweis.
src
-
Die URL der einzubettenden Audiodatei. Dies unterliegt den HTTP-Zugriffskontrollen. Dieses Attribut ist optional; Sie können stattdessen das
<source>
Element innerhalb des Audioblocks verwenden, um das einzubettende Audio anzugeben.
Ereignisse
Ereignisname | Wird 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 das Medium abspielen kann, aber schätzt, dass nicht genügend Daten geladen wurden, um das Medium bis zum Ende abzuspielen, ohne für weiteres Puffern des Inhalts anhalten zu müssen. |
[`canplaythrough`](/de/docs/Web/API/HTMLMediaElement/canplaythrough_event) | Der Browser schätzt, dass er das Medium bis zum Ende abspielen kann, ohne für das Puffern von Inhalten anhalten zu müssen. |
[`complete`](/de/docs/Web/API/OfflineAudioContext/complete_event) | Das Rendern eines [`OfflineAudioContext`](/de/docs/Web/API/OfflineAudioContext) ist beendet. |
[`durationchange`](/de/docs/Web/API/HTMLMediaElement/durationchange_event) | Das duration Attribut aktualisiert wurde. |
[`emptied`](/de/docs/Web/API/HTMLMediaElement/emptied_event) | Das Medium leer geworden ist; zum Beispiel wird dieses Ereignis gesendet, wenn das Medium bereits geladen (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 das Laden abgeschlossen hat. |
[`loadedmetadata`](/de/docs/Web/API/HTMLMediaElement/loadedmetadata_event) | Die Metadaten geladen wurden. |
[`loadstart`](/de/docs/Web/API/HTMLMediaElement/loadstart_event) | Ausgelöst wird, wenn der Browser begonnen hat, die Ressource zu laden. |
[`pause`](/de/docs/Web/API/HTMLMediaElement/pause_event) | Die Wiedergabe pausiert wurde. |
[`play`](/de/docs/Web/API/HTMLMediaElement/play_event) | Die Wiedergabe begonnen hat. |
[`playing`](/de/docs/Web/API/HTMLMediaElement/playing_event) | Die Wiedergabe bereit ist zu starten, nachdem sie pausiert wurde oder aufgrund von Datenmangel verzögert wurde. |
[`ratechange`](/de/docs/Web/API/HTMLMediaElement/ratechange_event) | Die Wiedergabegeschwindigkeit geändert wurde. |
[`seeked`](/de/docs/Web/API/HTMLMediaElement/seeked_event) | Eine Such-Operation abgeschlossen ist. |
[`seeking`](/de/docs/Web/API/HTMLMediaElement/seeking_event) | Eine Such-Operation gestartet wurde. |
[`stalled`](/de/docs/Web/API/HTMLMediaElement/stalled_event) | Der User-Agent versucht, Mediendaten abzurufen, aber die Daten unerwartet nicht eintreffen. |
[`suspend`](/de/docs/Web/API/HTMLMediaElement/suspend_event) | Das Laden mediisicher Daten ausgesetzt wurde. |
[`timeupdate`](/de/docs/Web/API/HTMLMediaElement/timeupdate_event) |
Die im currentTime Attribut angegebene Zeit aktualisiert wurde.
|
[`volumechange`](/de/docs/Web/API/HTMLMediaElement/volumechange_event) | Die Lautstärke geändert wurde. |
[`waiting`](/de/docs/Web/API/HTMLMediaElement/waiting_event) | Die Wiedergabe gestoppt wurde, weil vorübergehend keine Daten verfügbar sind. |
Verwendungshinweise
Browser unterstützen nicht alle die gleichen Dateiformate und Audio-Codecs; Sie können mehrere Quellen innerhalb geschachtelter <source>
Elemente bereitstellen, und der Browser verwendet dann das erste, das 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. Beim Verwenden von HTTP(S) URLs ist zu beachten, dass das Caching-Verhalten des Browsers beeinflusst, wie oft die Datei vom Server abgerufen wird. Data 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 es die Größe der HTML-Datei erhöht.
Sie können auch die Web Audio API verwenden, um Audio-Streams direkt 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-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 sind nicht ansteuerbar und unterstützen nur einen begrenzten Satz von Codecs.
Wir bieten einen umfassenden und gründlichen Leitfaden zu Mediendateitypen und den Audio-Codecs, die innerhalb dieser verwendet werden können. Außerdem steht ein Leitfaden zu den unterstützten Codecs für Video zur Verfügung.
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 derHTMLMediaElement
API erstellen. - Um eine präzise Steuerung über Ihre Audioinhalte zu ermöglichen, feuern
HTMLMediaElement
viele unterschiedliche Ereignisse. Dies bietet auch eine Möglichkeit, den Abrufprozess des Audios zu überwachen, sodass Sie auf Fehler achten oder erkennen können, wann genug vorhanden ist, um mit dem Abspielen zu beginnen oder es zu manipulieren. <audio>
Elemente können keine Untertitel oder Bildunterschriften auf die gleiche Weise wie<video>
Elemente haben. Siehe WebVTT und Audio von Ian Devlin für einige nützliche Informationen und Workarounds.- Um den Fallback-Inhalt auf 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 von HTML <audio>
ist das HTML Video und Audio Einsteigertutorial.
Styling mit CSS
Das <audio>
Element hat keine eigenen intrinsischen visuellen Ausgaben, es sei denn, das controls
Attribut ist angegeben, in welchem Fall die Standardsteuerungen des Browsers angezeigt werden.
Die Standardsteuerungen haben einen display
Wert von inline
standardmäßig, 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 es innerhalb eines Textblocks sitzt oder ähnlich.
Sie können die Standardsteuerungen mit Eigenschaften stylen, die den Block als eine Einheit betreffen, sodass Sie ihm zum Beispiel border
und border-radius
, padding
, margin
usw. geben können. Sie können jedoch nicht die einzelnen Komponenten im Audioplayer stylen (z.B. die Schaltflächengröße oder Symbole ändern, die Schriftart wechseln, etc.), und die Steuerungen unterscheiden sich in den verschiedenen Browsern.
Um ein konsistentes Erscheinungsbild zwischen Browsern zu erzielen, müssen Sie benutzerdefinierte Steuerungen erstellen; diese können in beliebiger Weise markiert und gestylt werden, die Sie möchten, und dann kann JavaScript zusammen mit der HTMLMediaElement
API verwendet werden, um ihre Funktionalität zu verdrahten.
Grundlagen der Videoplayer-Stylisierung bietet einige nützliche Stylisierungstechniken — es ist im Kontext von <video>
geschrieben, aber vieles davon ist genauso anwendbar auf <audio>
.
Erkennung von 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 gesendet. Stattdessen werden sie an das Track-Listen-Objekt im <audio>
Element gesendet, das dem Spurentyp entspricht, der zum Element hinzugefügt wurde:
HTMLMediaElement.audioTracks
-
Eine
AudioTrackList
, die alle Audiotracks des Medienelements enthält. Sie können einen Listener füraddtrack
zu diesem Objekt hinzufügen, um benachrichtigt zu werden, wenn neue Audiotracks dem Element hinzugefügt werden. HTMLMediaElement.videoTracks
-
Fügen Sie diesem
VideoTrackList
Objekt einenaddtrack
Listener hinzu, um über das Hinzufügen von Videospuren zum Element informiert zu werden. HTMLMediaElement.textTracks
-
Fügen Sie diesem
TextTrackList
einenaddtrack
Ereignis-Listener hinzu, um benachrichtigt zu werden, wenn neue Textspuren zu dem Element hinzugefügt werden.
Hinweis:
Auch wenn es sich um ein <audio>
Element handelt, hat es dennoch Video- und Textspurlisten und kann tatsächlich verwendet werden, um Video anzuzeigen, obwohl die Benutzeroberflächenimplikationen seltsam sein können.
Zum Beispiel können Sie den folgenden Code verwenden, um zu erkennen, wann Audiotracks zu oder von einem <audio>
Element hinzugefügt oder entfernt werden:
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 dem Element hinzugefügt oder entfernt werden, und ruft eine hypothetische Funktion auf einem Spur-Editor auf, um die Spur in die Liste der verfügbaren Tracks des Editors einzutragen oder daraus zu entfernen.
Sie können auch addEventListener()
verwenden, um die addtrack
und removetrack
Ereignisse zu überwachen.
Barrierefreiheit
Audio mit gesprochenem Dialog sollte sowohl Bildunterschriften als auch Transkriptionen bereitstellen, die den Inhalt genau beschreiben. Bildunterschriften, die mittels WebVTT spezifiziert werden, ermöglichen es Menschen mit Hörbehinderungen, den Inhalt einer Audioaufnahme zu verstehen, während die Aufnahme abgespielt wird, während Transkriptionen es Menschen ermöglichen, die mehr Zeit benötigen, den Inhalt der Aufnahme in einem Tempo und Format zu überprüfen, das für sie angenehm ist.
Wenn automatische Untertitelungsdienste verwendet werden, ist es wichtig, den erzeugten Inhalt zu überprüfen, um sicherzustellen, dass er die Ausgangsaudio genau darstellt.
Das <audio>
Element unterstützt WebVTT nicht direkt. Sie müssen eine Bibliothek oder ein Framework finden, das diese Funktion bietet, oder selbst den Code zum Anzeigen von Bildunterschriften schreiben. Eine Möglichkeit ist, Ihr Audio mit einem <video>
Element abzuspielen, das WebVTT unterstützt.
Neben gesprochenem Dialog sollten auch Untertitel und Transkriptionen Musik und Soundeffekte identifizieren, die wichtige Informationen kommunizieren. Dies umfasst Emotionen und Ton. Beispielsweise wird im nachstehenden WebVTT die Verwendung von eckigen Klammern verwendet, um dem Zuschauer Ton und emotionale Einsicht zu geben; dies kann helfen, die Stimmung zu vermitteln, die ansonsten durch Musik, nonverbale Geräusche und entscheidende Soundeffekte bereitgestellt wird, usw.
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, einige Inhalte (z. B. den direkten Download-Link) als Fallback für Benutzer 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>
Beispiele
Grundlegende Verwendung
Das folgende Beispiel zeigt die grundlegende Verwendung des <audio>
Elements zum Abspielen einer OGG-Datei. Es wird aufgrund des autoplay
Attributs automatisch abgespielt — wenn die Seite die Erlaubnis 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>
Einzelheiten darüber, wann Autoplay funktioniert, wie Sie die Erlaubnis zur Verwendung von Autoplay erhalten und wie und wann es angemessen ist, Autoplay zu verwenden, finden Sie in unserem Autoplay-Leitfaden.
<audio>
Element mit <source> Element
In diesem Beispiel wird angegeben, welche Audiospur über das src
Attribut auf einem geschachtelten <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 feststellen kann, ob er diese Datei abspielen kann und keine Zeit darauf verschwendet, 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 Quellenelement (Opus) zu laden, wenn er es abspielen kann; falls 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
Inhaltskategorien |
Fließinhalt, Textinhalt, eingebetteter Inhalt. Wenn es ein
controls Attribut hat: interaktiver
Inhalt und greifbarer 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 Start- als auch das End-Tag sind obligatorisch. |
Erlaubte Eltern | Jedes Element, das eingebetteten Inhalt akzeptiert. |
Implizierte 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
BCD tables only load in the browser