<audio>: Das Embed Audio-Element

Das obige Beispiel zeigt eine grundlegende Verwendung des <audio>-Elements. Ähnlich wie bei dem <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 wie Autoplay und Loop festzulegen oder ob wir die Standard-Audiosteuerung 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.

Zu den Attributen dieses Elements gehören die globalen Attribute.

autoplay

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

Hinweis: Websites, die automatisch Audio (oder Videos mit Audiospur) abspielen, können für Benutzer eine unangenehme Erfahrung sein und sollten, wenn möglich, vermieden werden. Wenn Sie die Autoplay-Funktionalität anbieten müssen, sollten Sie sie optional machen (der Benutzer muss sie speziell aktivieren). Dies kann jedoch nützlich sein, wenn Sie Medienelemente erstellen, deren Quelle zu einem späteren Zeitpunkt unter Benutzereingaben festgelegt wird. Weitere Informationen zur ordnungsgemäßen Verwendung von Autoplay finden Sie in unserem Autoplay-Leitfaden.

controls

Wenn dieses Attribut vorhanden ist, bietet der Browser Steuerungen an, die es dem Benutzer ermöglichen, die Audiowiedergabe zu steuern, einschließlich Lautstärke, Suchen und Pause/Fortsetzen der Wiedergabe.

controlslist

Das controlslist-Attribut hilft dem Browser bei der Auswahl der anzuzeigenden Steuerungen für das audio-Element, wann immer der Browser sein eigenes Steuerungsset zeigt (das heißt, 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 HTTP-Basis-Authentifizierung. Wenn der Server der Ursprungsseite keine Anmeldeinformationen gibt (indem er den Access-Control-Allow-Origin: HTTP-Header nicht setzt), wird die Ressource verunreinigt und ihre Verwendung 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 einer HTTP-Basis-Authentifizierung. Wenn der Server der Ursprungsseite keine Anmeldeinformationen gibt (über den Access-Control-Allow-Credentials: HTTP-Header), wird die Ressource verunreinigt und ihre Verwendung eingeschränkt.

Wenn nicht vorhanden, wird die Ressource ohne CORS-Anfrage abgerufen (d.h. ohne den Origin: HTTP-Header zu senden), was ihre unverunreinigte Verwendung in <canvas>-Elementen verhindert. Wenn ungültig, wird es so behandelt, als ob das enumerierte Schlüsselwort anonymous verwendet wurde. Weitere Informationen finden Sie in den CORS-Einstellungen.

disableremoteplayback

Ein Boolean-Attribut, das die Fähigkeit zur Fernwiedergabe auf Geräten, die mit kabelgebundenen (HDMI, DVI, etc.) und drahtlosen Technologien (Miracast, Chromecast, DLNA, AirPlay, etc.) verbunden sind, deaktiviert. Weitere Informationen finden Sie in diesem vorgeschlagenen Standard.

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

loop

Ein Boolean-Attribut: Wenn es angegeben ist, wird der Audioplayer automatisch zum Start zurückgehen, nachdem das Ende der Audio erreicht wurde.

muted

Ein Boolean-Attribut, das angibt, ob das Audio initial 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 die Audiometadaten (z.B. Länge) abgerufen werden.
• auto: Gibt an, dass die gesamte Audiodatei heruntergeladen werden kann, selbst wenn der Benutzer sie möglicherweise nicht verwenden möchte.
• leerer String: Ein Synonym für den auto-Wert.

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, muss 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 nur 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 Audioblocks verwenden, um das einzubettende Audio anzugeben.

Browser unterstützen nicht alle die gleichen Dateitypen und Audiocodecs; Sie können mehrere Quellen innerhalb verschachtelter <source>-Elemente angeben, und der Browser wird dann die erste verwenden, 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 Daten-URLs. Bei der Verwendung von HTTP(S)-URLs 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 aus JavaScript-Code zu generieren und zu manipulieren, anstatt bereits vorhandene Audiodateien zu streamen. Sie können die 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 eine begrenzte Anzahl von Codecs.

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

Weitere 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 eine präzise Steuerung über Ihre Audioinhalte zu ermöglichen, feuern HTMLMediaElements viele verschiedene Events. Dies bietet auch eine Möglichkeit, den Abrufprozess der Audio zu überwachen, sodass Sie Fehler erfassen oder erkennen können, wann genug verfügbar ist, um es abzuspielen oder zu manipulieren.
• <audio>-Elemente können keine Untertitel oder Bildunterschriften haben, die mit ihnen in derselben Weise wie <video>-Elemente assoziiert sind. 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änger-Tutorial.

Das <audio>-Element hat keine eigene visuelle Ausgabe, es sei denn, das controls-Attribut ist 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 innerhalb eines Textblocks oder ähnlichem liegt.

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

Um ein einheitliches Aussehen und Verhalten in den Browsern zu erhalten, müssen Sie benutzerdefinierte Steuerungen erstellen; diese können in welcher Weise auch immer ausgezeichnet und gestaltet werden, und dann kann JavaScript zusammen mit der HTMLMediaElement API verwendet werden, um ihre Funktionalität zu verknüpfen.

Grundlagen der Videoplayer-Gestaltung bietet einige nützliche Gestaltungstechniken — es ist im Kontext von <video> geschrieben, aber vieles davon ist auch auf <audio> anwendbar.

Sie können erkennen, wann Spuren zu einem <audio>-Element hinzugefügt und aus diesem entfernt werden, indem Sie die Ereignisse addtrack und removetrack 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 gesendet, das dem Typ der hinzugefügten Spur entspricht:

HTMLMediaElement.audioTracks

Ein AudioTrackList enthält alle Audiospuren des Medienelements. Sie können einen Listener für addtrack zu diesem Objekt hinzufügen, um benachrichtigt zu werden, wenn neue Audiospuren zum Element hinzugefügt werden.

HTMLMediaElement.videoTracks

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

HTMLMediaElement.textTracks

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

Zum Beispiel, um zu erkennen, wann Audiospuren zu einem <audio>-Element hinzugefügt oder daraus entfernt werden, können Sie einen 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 das Hinzufügen und Entfernen von Audiospuren im Element und ruft eine hypothetische Funktion in einem Spureditor auf, um die Spur zur Liste der verfügbaren Spuren des Editors hinzuzufügen oder zu entfernen.

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

Audio mit gesprochenem Dialog sollte sowohl Untertitel als auch Transkripte enthalten, die dessen Inhalt genau beschreiben. Untertitel, die mit WebVTT angegeben sind, ermöglichen es Menschen mit Hörbehinderungen, den Inhalt einer Audioaufnahme während ihrer Wiedergabe zu verstehen, während Transkripte Menschen, die mehr Zeit benötigen, die Möglichkeit bieten, den Inhalt der Aufnahme in einem für sie angenehmen 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 Ausgangsaudio korrekt wiedergibt.

Das <audio>-Element unterstützt WebVTT nicht direkt. Sie müssen eine Bibliothek oder ein Framework finden, das Ihnen die Fähigkeit bietet, oder den Code selbst schreiben, um Untertitel anzuzeigen. Eine Option ist, Ihr Audioelement mit einem <video>-Element abzuspielen, das WebVTT unterstützt.

Zusätzlich zum gesprochenen Dialog sollten Untertitel und Transkripte auch Musik und Soundeffekte identifizieren, die wichtige Informationen kommunizieren. Dies umfasst Emotionen und Tonalität. Beispielsweise verwenden Sie im folgenden WebVTT-Beispiel eckige Klammern, um dem Betrachter Ton und emotionale Einsicht zu geben; dies kann helfen, die Stimmung zu vermitteln, die sonst durch Musik, nonverbale Sounds 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, etwas Inhalt (wie den direkten Download-Link) als Fallback für Personen 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, Transkripte 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 eine 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-Inhalt.

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

Weitere Details dazu, wann Autoplay funktioniert, wie man die Erlaubnis zur Nutzung von Autoplay erhält und wann es angebracht ist, Autoplay zu verwenden, finden Sie in unserem Autoplay-Leitfaden.

Dieses Beispiel gibt an, welche Audiospur eingebettet werden soll, indem das src-Attribut auf einem verschachtelten <source>-Element verwendet wird, anstatt direkt auf dem <audio>-Element. Es ist immer hilfreich, 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>

Dieses Beispiel enthält mehrere <source>-Elemente. Der Browser versucht, das erste Quellen-Element (Opus) zu laden, wenn er es abspielen kann; falls nicht, fällt er auf die 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

  • Media-Container-Formate (Dateitypen)
  • Leitfaden zu Audiocodecs für das Web

• Web Audio API

• HTMLAudioElement

• <source>
• <video>

• Lernbereich: HTML Video und Audio

• Grundlagen zur plattformübergreifenden Audioverwendung