`<audio>`: Das Einbettungs-Element für Audio
Baseline
Widely available
*
This feature is well established and works across many devices and browser versions. It’s been available across browsers since Juli 2015.
* Some parts of this feature may have varying levels of support.
Das <audio>
-HTML-Element wird verwendet, um Sound-Inhalte in Dokumente einzubetten. Es kann eine oder mehrere Audioquellen enthalten, die mit dem src
-Attribut oder dem <source>
-Element angegeben 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 grundlegende Nutzung des <audio>
-Elements. Ähnlich wie das <img>
-Element schließen wir einen Pfad zu dem Medium, das wir einbetten möchten, im src
-Attribut ein; wir können andere Attribute hinzufügen, um Informationen wie automatisches Abspielen und Schleifen, ob wir die Standard-Audiosteuerungen des Browsers anzeigen möchten, usw., anzugeben.
Der Inhalt zwischen den öffnenden und schließenden <audio></audio>
-Tags wird als Fallback in Browsers angezeigt, die das Element nicht unterstützen.
Attribute
Die Attribute dieses Elements beinhalten die globalen Attribute.
autoplay
-
Ein Boolesches Attribut: Wenn angegeben, wird das Audio automatisch abgespielt, sobald es möglich ist, ohne darauf zu warten, dass die gesamte Audiodatei heruntergeladen wurde.
Hinweis: Websites, die automatisch Audio (oder Videos mit einem Audiotrack) abspielen, können eine unangenehme Erfahrung für Benutzer sein und sollten nach Möglichkeit vermieden werden. Wenn Sie die Funktionalität des automatischen Abspielens anbieten müssen, sollten Sie sie optional machen (indem der Benutzer sie explizit aktivieren muss). Dies kann jedoch nützlich sein, wenn Sie Medienelemente erstellen, deren Quelle zu einem späteren Zeitpunkt unter Benutzerkontrolle festgelegt wird. Siehe unseren Autoplay-Leitfaden für zusätzliche Informationen über die ordnungsgemäße Verwendung von Autoplay.
controls
-
Wenn dieses Attribut vorhanden ist, bietet der Browser Steuerungen, mit denen der Benutzer die Audiowiedergabe steuern kann, einschließlich Lautstärke, Suchlauf und Pause/Fortsetzen der Wiedergabe.
controlslist
-
Das
controlslist
-Attribut hilft dem Browser zu bestimmen, welche Steuerungen für dasaudio
-Element angezeigt werden sollen, wann immer der Browser sein eigenes Steuerungsset angezeigt (d.h. wenn dascontrols
-Attribut angegeben ist).Die erlaubten Werte sind
nodownload
,nofullscreen
undnoremoteplayback
. crossorigin
-
Dieses aufeinander abgestimmte 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 verunreinigt zu werden. Die erlaubten Werte sind:anonymous
-
Sendet eine cross-origin-Anfrage ohne Berechtigung. Mit anderen Worten, es sendet das
Origin:
-HTTP-Header ohne ein Cookie, X.509-Zertifikat oder die Durchführung einer HTTP-Basisauthentifizierung. Wenn der Server keine Berechtigungen an die Ursprungsseite gibt (indem dasAccess-Control-Allow-Origin:
-HTTP-Header nicht gesetzt wird), wird die Ressource verunreinigt und ihre Verwendung eingeschränkt. use-credentials
-
Sendet eine cross-origin-Anfrage mit Berechtigung. Mit anderen Worten, es sendet das
Origin:
-HTTP-Header mit einem Cookie, einem Zertifikat oder durch die Durchführung einer HTTP-Basisauthentifizierung. Wenn der Server keine Berechtigungen an die Ursprungsseite gibt (durch dasAccess-Control-Allow-Credentials:
-HTTP-Header), wird die Ressource verunreinigt und ihre Nutzung eingeschränkt.
Wenn nicht vorhanden, wird die Ressource ohne eine CORS-Anfrage abgerufen (d.h. ohne das
Origin:
-HTTP-Header zu senden), was ihre nicht-verunreinigte Verwendung in<canvas>
-Elementen verhindert. Bei Ungültigkeit wird sie so behandelt, als wäre das abgestimmte Schlüsselwort anonymous verwendet worden. Siehe CORS-Einstellungen für Attribute für weitere Informationen. disableremoteplayback
-
Ein Boolesches Attribut, das die Fähigkeit zur Fernwiedergabe auf Geräten deaktiviert, die mit kabelgebundenen (HDMI, DVI, etc.) und kabellosen Technologien (Miracast, Chromecast, DLNA, AirPlay, etc.) angeschlossen sind. Siehe die vorgeschlagene Remote Playback API-Spezifikation für weitere Informationen.
In Safari können Sie
x-webkit-airplay="deny"
als Fallback verwenden. loop
-
Ein Boolesches Attribut: Wenn angegeben, sucht der Audioplayer automatisch zum Anfang zurück, nachdem das Ende des Audios erreicht wurde.
muted
-
Ein Boolesches Attribut, das angibt, ob das Audio zunächst stummgeschaltet wird. Sein Standardwert ist
false
. preload
-
Dieses aufeinander abgestimmte Attribut soll dem Browser einen Hinweis geben, was der Autor denkt, dass es zur besten Benutzererfahrung führt. Es kann einen der folgenden Werte haben:
none
: Gibt an, dass das Audio nicht vorgeladen werden soll.metadata
: Gibt an, dass nur die 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 verwenden.- leerer String: Ein Synonym für den
auto
-Wert.
Der Standardwert ist je nach Browser verschieden. Die Spezifikation empfiehlt, ihn auf
metadata
zu setzen.Hinweis:
- Das
autoplay
-Attribut hat Vorrang vorpreload
. Wennautoplay
angegeben ist, müsste der Browser offensichtlich beginnen, das Audio für die Wiedergabe herunterzuladen. - Der Browser ist nicht durch die Spezifikation gezwungen, den Wert dieses Attributs zu befolgen; es ist lediglich ein Hinweis.
src
-
Die URL des einzubettenden Audios. Dies unterliegt den HTTP-Zugriffskontrollen. Dies ist optional; Sie können stattdessen das
<source>
-Element innerhalb des Audio-Blocks verwenden, um das einzubettende Audio anzugeben.
Ereignisse
audioprocess
Veraltet-
Der Eingabepuffer eines
ScriptProcessorNode
ist bereit zur Verarbeitung. canplay
-
Der Browser kann das Medium abspielen, schätzt aber, dass nicht genug Daten geladen wurden, um das Medium bis zu seinem Ende abzuspielen, ohne für weiteres Laden anzuhalten.
canplaythrough
-
Der Browser schätzt, dass er das Medium bis zu seinem Ende abspielen kann, ohne für das Puffern des Inhalts anzuhalten.
complete
-
Die Erstellung eines
OfflineAudioContext
ist beendet. durationchange
-
Das
duration
-Attribut wurde aktualisiert. emptied
-
Das Medium ist leer geworden; zum Beispiel wird dieses Ereignis gesendet, wenn das Medium bereits geladen (oder teilweise geladen) wurde und die
HTMLMediaElement.load
-Methode aufgerufen wird, um es neu zu laden. ended
-
Die Wiedergabe wurde gestoppt, da das Ende des Mediums erreicht wurde.
loadeddata
-
Der erste Frame des Mediums ist geladen.
loadedmetadata
-
Die Metadaten sind geladen.
loadstart
-
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 zu beginnen, nachdem sie pausiert oder wegen Datenmangels verzögert wurde.
ratechange
-
Die Wiedergabegeschwindigkeit hat sich geändert.
seeked
-
Eine Seek-Operation wurde abgeschlossen.
seeking
-
Eine Seek-Operation hat begonnen.
stalled
-
Der Benutzeragent versucht, Mediendaten abzurufen, aber Daten kommen unerwartet nicht.
suspend
-
Das Laden der Mediendaten wurde unterbrochen.
timeupdate
-
Die durch das
currentTime
-Attribut angegebene Zeit wurde aktualisiert. volumechange
-
Die Lautstärke hat sich geändert.
waiting
-
Die Wiedergabe wurde aufgrund eines vorübergehenden Mangels an Daten gestoppt.
Verwendungshinweise
Browser unterstützen nicht alle die gleichen Dateiformate und Audio-Codecs; Sie können mehrere Quellen innerhalb geschachtelter <source>
-Elemente zur Verfügung stellen, 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. Seien Sie sich bei der Verwendung von HTTP(S)-URLs bewusst, dass das Caching-Verhalten des Browsers beeinflusst, wie oft die Datei vom Server angefordert wird. Data-URLs binden die Audiodaten direkt in das HTML ein, was für kleine Audiodateien nützlich sein kann, aber für größere Dateien nicht empfohlen wird, da es die Größe der HTML-Datei erhöht.
Beim Verwenden von <source>
-Elementen 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 für jedes individuelle <source>
-Element ausgelöst.
Sie können auch die Web Audio API verwenden, um Audiosignale direkt aus JavaScript-Code 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-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 durchsuchbar und unterstützen nur einen begrenzten Satz von Codecs.
Wir bieten einen substanziellen und gründlichen Leitfaden zu Medientypen und den Audio-Codecs, die in ihnen verwendet werden können. Ebenfalls verfügbar ist ein Leitfaden zu den Codecs, die für Video unterstützt werden.
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 präzise Kontrolle über Ihre Audioinhalte zu ermöglichen, lösen
HTMLMediaElement
s 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 genügend verfügbar ist, um mit der Wiedergabe zu beginnen oder sie zu manipulieren. <audio>
-Elemente können nicht auf die gleiche Weise wie<video>
-Elemente Untertitel oder Bildunterschriften enthalten. Siehe WebVTT and Audio von Ian Devlin für nützliche Informationen und Workarounds.- Um die Fallback-Inhalte 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 zu HTML <audio>
ist das HTML video and audio Anfänger-Tutorial.
Styling mit CSS
Das <audio>
-Element hat keinen eigenen visuellen Output, es sei denn, das controls
-Attribut wird angegeben, in diesem Fall werden die Standardsteuerungen des Browsers angezeigt.
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 oder Ähnlichem sitzt.
Sie können die Standardsteuerungen mit Eigenschaften stylen, die den Block als Ganzes betreffen, sodass Sie beispielsweise eine border
und border-radius
, padding
, margin
, usw. geben können. Sie können jedoch nicht die einzelnen Komponenten innerhalb des Audio-Players stylen (z.B. die Größe der Knöpfe oder Symbole ändern, die Schriftart ändern, etc.), und die Steuerungen sind in den verschiedenen Browsern unterschiedlich.
Um einen konsistenten Look-and-Feel über Browser hinweg zu erhalten, 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 verknüpfen.
Video player styling basics bietet einige nützliche Styling-Techniken — es ist im Kontext von <video>
geschrieben, aber vieles davon ist gleichermassen auf <audio>
anwendbar.
Erkennung von Hinzufügung und Entfernung von Tracks
Sie können erkennen, wann Tracks zu einem <audio>
-Element hinzugefügt oder daraus 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-Listen-Objekt innerhalb des <audio>
-Elements HTMLMediaElement
gesendet, das dem Typ des hinzugefügten Tracks entspricht:
HTMLMediaElement.audioTracks
-
Eine
AudioTrackList
, die alle Audiotracks des Medienelements enthält. Sie können einen Listener füraddtrack
an dieses Objekt hinzufügen, um alarmiert zu werden, wenn neue Audiotracks zu dem Element hinzugefügt werden. HTMLMediaElement.videoTracks
-
Fügen Sie einen
addtrack
-Listener zu diesemVideoTrackList
-Objekt hinzu, um informiert zu werden, wenn Videotracks zu dem Element hinzugefügt werden. HTMLMediaElement.textTracks
-
Fügen Sie einen
addtrack
-Ereignis-Listener zu diesemTextTrackList
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 weiterhin Video- und Texttrack-Listen und kann tatsächlich verwendet werden, um Videos zu präsentieren, obwohl die Auswirkungen auf die Benutzeroberfläche seltsam sein können.
Um beispielsweise zu erkennen, wann Audiotracks zu einem <audio>
-Element hinzugefügt oder daraus entfernt werden, können Sie den folgenden Code 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 Audiospuren zum Element hinzugefügt oder daraus entfernt 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 und zu entfernen.
Sie können auch addEventListener()
verwenden, um die addtrack
und removetrack
-Ereignisse abzuhören.
Barrierefreiheit
Audio mit gesprochenem Dialog sollte sowohl Untertitel als auch Transkripte enthalten, die den Inhalt genau beschreiben. Untertitel, die mit WebVTT angegeben werden, ermöglichen es Menschen mit Hörbehinderungen, den Inhalt einer Audioaufnahme zu verstehen, während die Aufzeichnung abgespielt wird. Transkripte ermöglichen es Menschen, die zusätzliche Zeit benötigen, den Inhalt der Aufzeichnung in einem Tempo und Format zu überprüfen, das für sie angenehm ist.
Wenn automatische Untertitelungsdienste verwendet werden, ist es wichtig, die generierten Inhalte zu überprüfen, um sicherzustellen, dass sie das Originalaudio genau wiedergeben.
Das <audio>
-Element unterstützt WebVTT nicht direkt. Sie müssen eine Bibliothek oder ein Framework finden, das die Fähigkeit für Sie bereitstellt, oder den Code selbst schreiben, um Untertitel anzuzeigen. Eine Möglichkeit besteht darin, Ihr Audio mithilfe eines <video>
-Elements abzuspielen, das WebVTT unterstützt.
Zusätzlich zum gesprochenen Dialog sollten in den Untertiteln und Transkripten auch Musik und Soundeffekte identifiziert werden, die wichtige Informationen übermitteln. Dazu gehören Emotionen und Ton. Beispielsweise wird im folgenden WebVTT die Verwendung von eckigen Klammern zur Darstellung von Ton und emotionalen Einsichten für den Zuschauer beachtet; dies kann helfen, die Stimmung zu vermitteln, die normalerweise durch Musik, nonverbale Geräusche und wesentliche 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, einigen Inhalt (wie den direkten Download-Link) als Fallback für Betrachter 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 Nutzung
Das folgende Beispiel zeigt die grundlegende Verwendung des <audio>
-Elements, um eine OGG-Datei abzuspielen. Es wird aufgrund des autoplay
-Attributs automatisch abgespielt—wenn die Seite die Berechtigung dazu hat—und enthält auch Fallback-Inhalte.
<!-- Basic audio playback -->
<audio src="AudioTest.ogg" autoplay>
<a href="AudioTest.ogg" download="AudioTest.ogg">Download OGG audio</a>.
</audio>
Weitere Informationen darüber, wann Autoplay funktioniert, wie Sie die Berechtigung zur Nutzung von Autoplay erhalten und wann und wie es angebracht ist, Autoplay zu verwenden, finden Sie in unserem Autoplay-Leitfaden.
<audio>
-Element mit <source>
-Element
In diesem Beispiel wird angegeben, welcher Audiotrack über das src
-Attribut 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 feststellen kann, ob er die Datei abspielen kann, und keine Zeit damit vergeudet, 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
Inhaltskategorien |
Flow-Inhalt, Phrasing-Inhalt, eingebetteter Inhalt. Wenn es ein
controls -Attribut hat: interaktiver
und greifbarer Inhalt.
|
---|---|
Zulässiger Inhalt |
Wenn das Element ein src -Attribut hat:
null oder mehr <track> -Elemente gefolgt von transparentem Inhalt, der kein
<audio> oder <video>
Medienelemente enthält.Andernfalls: null oder mehr <source>
Elemente gefolgt von null oder mehr <track>
Elementen gefolgt von transparentem Inhalt, der kein
<audio> oder <video>
Medienelemente enthält.
|
Tag-Auslassung | Keine, sowohl das Start- als auch das 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> # the-audio-element> |
Browser-Kompatibilität
Loading…