<audio>: Das Einbettungselement für Audio

<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 fügen wir einen Pfad zu dem Medium hinzu, das wir im src Attribut einbetten möchten; wir können andere Attribute hinzufügen, um Informationen wie Autostart und Schleifen, das Anzeigen der Standard-Audiosteuerungen des Browsers usw. anzugeben.

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

Die Attribute dieses Elements umfassen die globalen Attribute.

autoplay

Ein logisches Attribut: Wenn angegeben, beginnt das Audio automatisch mit der Wiedergabe, sobald es möglich ist, ohne darauf zu warten, dass die gesamte Audiodatei heruntergeladen wurde.

Hinweis: Seiten, die automatisch Audios (oder Videos mit einem Audiotrack) abspielen, können eine unangenehme Erfahrung für Nutzer sein und sollten möglichst vermieden werden. Wenn Sie dennoch eine Autostart-Funktionalität anbieten müssen, sollten Sie es opt-in gestalten (d. h. der Nutzer muss es bewusst aktivieren). Dies kann jedoch nützlich sein, wenn Sie Medienelemente erstellen, deren Quelle zu einem späteren Zeitpunkt unter Benutzers Steuerung festgelegt wird. Weitere Informationen zur ordnungsgemäßen Verwendung von Autostart finden Sie in unserem Autoplay Leitfaden.

controls

Wenn dieses Attribut vorhanden ist, bietet der Browser Steuerungen an, mit denen der Nutzer die Audiowiedergabe steuern kann, einschließlich Lautstärke, Suche und Pause/Wiedergabe.

controlslist

Das controlslist Attribut, wenn spezifiziert, hilft dem Browser dabei, 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 ist).

Die erlaubten Werte sind nodownload, nofullscreen und noremoteplayback.

crossorigin

Dieses enumerierte 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 Berechtigungsnachweis. Mit anderen Worten, es sendet den Origin: HTTP-Header ohne Cookie, X.509-Zertifikat oder Durchführung der HTTP-Basis-Authentifizierung. Wenn der Server keine Berechtigungsnachweise an die Ursprungsseite gibt (indem er den Access-Control-Allow-Origin: HTTP-Header nicht setzt), wird die Ressource verunreinigt und ihre Nutzung eingeschränkt.

use-credentials

Sendet eine Cross-Origin-Anfrage mit Berechtigungsnachweis. Mit anderen Worten, es sendet den Origin: HTTP-Header mit einem Cookie, einem Zertifikat oder Durchführung der HTTP-Basis-Authentifizierung. Wenn der Server keine Berechtigungsnachweise an die Ursprungsseite gibt (durch den Access-Control-Allow-Credentials: HTTP-Header), wird die Ressource verunreinigt 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 die nicht verunreinigte Verwendung in <canvas> Elementen verhindert. Wenn ungültig, wird es behandelt, als ob das enumerierte Schlüsselwort anonymous verwendet wurde. Weitere Informationen finden Sie unter CORS-Einstellungen Attribute.

disableremoteplayback

Ein logisches 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. Weitere Informationen finden Sie in dieser vorgeschlagenen Spezifikation.

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

loop

Ein logisches Attribut: Wenn angegeben, sucht der Audioplayer automatisch nach dem Ende des Audios zurück zum Anfang.

muted

Ein logisches Attribut, das angibt, ob das Audio anfangs stummgeschaltet ist. Der Standardwert ist false.

preload

Dieses enumerierte Attribut soll dem Browser einen Hinweis darauf geben, was der Autor als beste Benutzererfahrung betrachtet. Es kann einen der folgenden Werte haben:

• none: Gibt an, dass das Audio nicht vorab geladen werden sollte.
• 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 Nutzer voraussichtlich nicht darauf zugreifen wird.
• leeres Zeichenfolge: 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 das Audio für die Wiedergabe herunterladen.
• 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; stattdessen können Sie das <source> Element innerhalb des Audio-Blocks verwenden, um das Audios einzubetten.

Browser unterstützen nicht alle die gleichen Dateitypen und Audio-Codecs; Sie können mehrere Quellen innerhalb geschachtelter <source>-Elemente angeben, 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 eine beliebige gültige URL gesetzt werden, einschließlich HTTP(S)-URLs und Daten-URLs. Bei der 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, jedoch nicht für größere Dateien empfohlen wird, da es die HTML-Dateigröße erhöht.

Bei der Verwendung 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 im <audio>-Element ausgelöst, nachdem alle Quellen fehlgeschlagen sind; error-Ereignisse werden nicht auf jedem einzelnen <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 vorab existierende 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 suchbar und unterstützen nur einen begrenzten Satz von Codecs.

Wir bieten einen umfassenden und gründlichen Leitfaden zu Medientypen und den Audiocodecs, die darin verwendet werden können. Zudem steht ein Leitfaden zu unterstützten Video-Codecs zur Verfügung.

Weitere Nutzungshinweise:

• Wenn Sie das controls Attribut nicht angeben, wird der Audioplayer die Standardsteuerungen des Browsers nicht einbeziehen. Sie können jedoch Ihre eigenen benutzerdefinierten Steuerungen mit JavaScript und der HTMLMediaElement API erstellen.
• Um präzise Kontrolle über Ihren Audiocontent zu ermöglichen, lösen HTMLMediaElement viele verschiedene Ereignisse aus. Dies bietet auch eine Möglichkeit, den Abrufprozess des Audios zu überwachen, sodass Sie auf Fehler achten oder erkennen können, wann genug bereit ist, um die Wiedergabe zu beginnen oder zu manipulieren.
• <audio>-Elemente können keine Untertitel oder Captions im selben Stil wie <video>-Elemente haben. Siehe WebVTT und Audio von Ian Devlin für nützliche Informationen und Workarounds.
• Um den Fallback-Content 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 Nutzung von HTML <audio> ist das HTML Video und Audio Anfänger-Tutorial.

Das <audio> Element hat keinen eigenen visuellen Output, es sei denn, das controls Attribut wird 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 es in einem Textblock o.ä. sitzt.

Sie können die Standardsteuerungen mit Eigenschaften stylen, die den Block als eine Einheit betreffen, so dass Sie ihm beispielsweise eine border und border-radius, padding, margin usw. geben können. Allerdings können Sie die einzelnen Komponenten im Audioplayer nicht stylen (z. B. die Größe der Schaltflächen oder Symbole ändern, die Schriftart ändern etc.), und die Steuerungen sind in den verschiedenen Browsern unterschiedlich.

Um in allen Browsern ein konsistentes Look-and-Feel 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 integrieren.

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

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 gesendet. Stattdessen werden sie an das Tracklist-Objekt innerhalb des <audio> Elements gesendet, das dem Typ des hinzugefügten Tracks entspricht:

HTMLMediaElement.audioTracks

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

HTMLMediaElement.videoTracks

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

HTMLMediaElement.textTracks

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

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

Sie können auch addEventListener() verwenden, um den addtrack und removetrack Ereignissen zuzuhören.

Audio mit gesprochenem Dialog sollte sowohl Captions als auch Transkriptionen bereitstellen, die den Inhalt genau beschreiben. Captions, die mit WebVTT angegeben werden, ermöglichen es Personen mit Hörbehinderungen, den Inhalt einer Audiowiedergabe während der Wiedergabe zu verstehen, während Transkriptionen es Personen ermöglichen, die zusätzliche Zeit benötigen, um den Inhalt in einem angenehmeren Tempo und Format zu überprüfen.

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

Das <audio>-Element unterstützt WebVTT nicht direkt. Sie müssen eine Bibliothek oder ein Framework finden, das diese 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 zum gesprochenen Dialog sollten Untertitel und Transkriptionen auch Musik und Soundeffekte identifizieren, die wichtige Informationen vermitteln. Dazu gehören Emotion und Ton. Zum Beispiel im folgenden WebVTT, beachten Sie die Verwendung von eckigen Klammern, um Ton und emotionale Einsicht dem Betrachter zu geben; dies kann helfen, die Stimmung zu vermitteln, die sonst durch Musik, nonverbale 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, einige Inhalte (wie den direkten Downloadlink) 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 Audiobeschreibungen
• MDN Verständnis von WCAG, Richtlinie 1.2 Erklärungen
• Verständnis des Erfolgskriteriums 1.2.1 | W3C Understanding WCAG 2.0
• Verständnis des Erfolgskriteriums 1.2.2 | W3C Understanding WCAG 2.0

Das folgende Beispiel zeigt die grundlegende Verwendung des <audio>-Elements, um eine OGG-Datei abzuspielen. Es wird aufgrund des autoplay Attributs automatisch abgespielt, falls die Seite die Erlaubnis dazu hat, und enthält auch Fallback-Content.

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

Weitere Details darüber, wann Autoplay funktioniert, wie Sie die Erlaubnis zur Verwendung von Autoplay erhalten und wie und wann es angebracht ist, Autoplay zu verwenden, finden Sie in unserem Autoplay Leitfaden.

Dieses Beispiel spezifiziert welche Audiospur eingebettet werden soll, indem das src Attribut auf einem geschachtelten <source> Element anstelle des <audio> Elements direkt verwendet wird. 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 auf sie verschwendet, wenn nicht.

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

Dieses Beispiel schließt mehrere <source> Elemente ein. Der Browser versucht zunächst, das erste Source-Element (Opus) zu laden, falls er in der Lage ist es abzuspielen; wenn nicht, greift 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>

• Web-Medientechnologien

  • Mediencontainerformate (Dateitypen)
  • Leitfaden zu Audiocodecs im Web

• Web Audio API

• HTMLAudioElement

• <source>
• <video>

• Lernbereich: HTML Video und Audio

• Cross-browser Audio Grundlagen