<audio>: Das Einbettungs-Element 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, das wir einbetten möchten, im src-Attribut ein; wir können andere Attribute hinzufügen, um Informationen zu spezifizieren, z. B. ob es automatisch abgespielt und wiederholt werden soll, ob die Standard-Audiosteuerungen des Browsers angezeigt werden sollen, usw.

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 Boolesches Attribut: Wenn angegeben, wird das Audio automatisch gestartet, sobald dies möglich ist, ohne darauf zu warten, dass die gesamte Audiodatei heruntergeladen wurde.

Hinweis: Websites, die automatisch Audio abspielen (oder Videos mit einem Audiotrack), können für Benutzer eine unangenehme Erfahrung darstellen und sollten daher nach Möglichkeit vermieden werden. Wenn Sie dennoch Autoplay-Funktionalität bieten müssen, sollten Sie diese als Opt-in-Option gestalten (erforderlich ist, dass der Benutzer sie speziell aktiviert). Dies kann jedoch nützlich sein, wenn Medienelemente erstellt werden, deren Quelle zu einem späteren Zeitpunkt unter Benutzerkontrolle festgelegt wird. Siehe unseren Autoplay-Leitfaden für zusätzliche Informationen zur ordnungsgemäßen Verwendung von Autoplay.

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, Suche und Pause/Fortsetzen der Wiedergabe.

controlslist

Das controlslist-Attribut hilft dem Browser, die anzuzeigenden Steuerungen für das audio-Element auszuwählen, wann immer der Browser seine eigenen Steuerungen anzeigt (d.h. wenn das controls-Attribut angegeben ist).

Die erlaubten Werte sind nodownload, nofullscreen und noremoteplayback.

crossorigin

Dieses aufzählbare-Attribut gibt an, ob CORS zum Abrufen der zugehörigen Audiodatei verwendet werden soll. CORS-fähige Ressourcen können im <canvas>-Element wiederverwendet werden, ohne verunreinigt zu werden. Die erlaubten Werte sind:

anonymous

Sendet eine Cross-Origin-Anforderung ohne Anmeldeinformationen. Es sendet also den HTTP-Header Origin: ohne Cookie, X.509-Zertifikat oder Durchführung der HTTP-Basisauthentifizierung. Gibt der Server der Ursprungssite keine Anmeldeinformationen (weil der HTTP-Header Access-Control-Allow-Origin: nicht gesetzt ist), wird die Ressource verunreinigt und ihre Nutzung eingeschränkt.

use-credentials

Sendet eine Cross-Origin-Anforderung mit Anmeldeinformationen. Es sendet also den HTTP-Header Origin: zusammen mit einem Cookie, einem Zertifikat oder der Durchführung der HTTP-Basisauthentifizierung. Gibt der Server der Ursprungssite keine Anmeldeinformationen (durch den HTTP-Header Access-Control-Allow-Credentials:), wird die Ressource verunreinigt und ihre Nutzung eingeschränkt.

Wenn nicht vorhanden, wird die Ressource ohne eine CORS-Anfrage abgerufen (d.h. ohne Senden des Origin:-Headers), was ihre unverunreinigte Nutzung in <canvas>-Elementen verhindert. Ist es ungültig, wird es so behandelt, als ob das aufzählbare Schlüsselwort anonymous verwendet wurde. Siehe CORS-Einstellungsattribute für zusätzliche Informationen.

disableremoteplayback

Ein Boolesches Attribut, das verwendet wird, um die Funktionalität der Fernwiedergabe auf Geräten zu deaktivieren, die über kabelgebundene (HDMI, DVI, usw.) und drahtlose Technologien (Miracast, Chromecast, DLNA, AirPlay, usw.) angeschlossen sind. Weitere Informationen finden Sie in der vorgeschlagenen Remote Playback API-Spezifikation.

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, sobald das Ende des Audios erreicht ist.

muted

Ein Boolesches Attribut, das angibt, ob das Audio initial stummgeschaltet ist. Der 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: Gibt an, dass das Audio nicht vorab geladen werden soll.
• metadata: Gibt an, dass nur Audio-Metadaten (z. B. Länge) abgerufen werden.
• auto: Gibt an, dass die ganze Audiodatei heruntergeladen werden kann, auch wenn nicht erwartet wird, dass der Benutzer sie verwendet.
• leerer String: Ein Synonym für den auto-Wert.

Der Standardwert ist je nach Browser unterschiedlich. In der Spezifikation wird empfohlen, metadata zu setzen.

Hinweis:

• Das autoplay-Attribut hat Vorrang vor preload. Wenn autoplay angegeben ist, müsste der Browser offensichtlich anfangen, 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-Zugriffssteuerungen. Dies ist optional; Sie können stattdessen das <source>-Element innerhalb des Audio-Blocks verwenden, um die einzubettende Audioquelle anzugeben.

Browser unterstützen nicht alle dieselben Dateitypen und Audio-Codecs; Sie können mehrere Quellen innerhalb verschachtelter <source>-Elemente bereitstellen, 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 eine gültige URL gesetzt werden, einschließlich HTTP(S)-URLs und Data-URLs. Bei Verwendung von HTTP(S)-URLs beachten Sie, dass das Caching-Verhalten des Browsers beeinflusst, wie oft die Datei vom Server angefordert wird. Data-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 dies die Dateigröße des HTML erhöht.

Bei 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 auf dem <audio>-Element ausgelöst, nachdem alle Quellen fehlgeschlagen sind; error-Ereignisse werden nicht bei jedem einzelnen <source>-Element ausgelöst.

Sie können auch die Web Audio API verwenden, um direkt Audio-Streams aus JavaScript-Code zu generieren und zu manipulieren, anstatt bestehende Audiodateien zu streamen. Sie können das srcObject in JavaScript auf ein MediaStream-Objet setzen. Dies wird häufig für Live-Audio-Streams oder Echtzeit-Audioverarbeitung 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 können nicht durchsucht werden und unterstützen nur einen begrenzten Satz von Codecs.

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

Weitere Verwendungshinweise:

• Wenn Sie das controls-Attribut nicht angeben, enthält der Audioplayer nicht die Standardsteuerungen des Browsers. Sie können jedoch eigene benutzerdefinierte Steuerungen mit JavaScript und der HTMLMediaElement-API erstellen.
• Um eine präzise Steuerung über Ihre Audioinhalte zu ermöglichen, feuern HTMLMediaElements viele verschiedene Ereignisse ab. Dies bietet auch eine Möglichkeit, den Abrufprozess des Audios zu überwachen, um Fehler zu erkennen oder festzustellen, wenn genug verfügbar ist, um mit dem Abspielen zu beginnen oder es zu manipulieren.
• <audio>-Elemente können keine Untertitel oder Untertitel in derselben Weise wie <video>-Elemente haben. Siehe WebVTT and Audio von Ian Devlin für 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 von HTML <audio> ist das HTML-Video- und Audio-Einsteiger-Tutorial.

Das <audio>-Element hat keine intrinsische visuelle Ausgabe, außer 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 Steuerung ü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 stylen, die den Block als einzelne Einheit beeinflussen, sodass Sie ihm z. B. einen 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 ändern usw.), und die Steuerungen sind in den verschiedenen Browsern unterschiedlich.

Um ein konsistentes Aussehen und Verhalten über Browser hinweg zu erzielen, 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 ihre Funktionalität zu verdrahten.

Grundlagen des Videoplayer-Stylings bietet einige nützliche Styling-Techniken — es ist im Kontext von <video> geschrieben, aber vieles davon ist ebenso 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 selbst gesendet. Stattdessen werden sie an das Tracklistenobjekt innerhalb des <audio>-Elements gesendet, das dem Typ des Tracks entspricht, der dem Element hinzugefügt wurde:

HTMLMediaElement.audioTracks

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

HTMLMediaElement.videoTracks

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

HTMLMediaElement.textTracks

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

Zum Beispiel, um zu erkennen, wann Audio-Tracks 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 überwacht, wann Audio-Tracks hinzugefügt oder entfernt werden, und ruft eine hypothetische Funktion auf einem Track-Editor auf, um den Track in die Liste der verfügbaren Tracks des Editors aufzunehmen und zu entfernen.

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

Audio mit gesprochener Dialogführung sollte sowohl Untertitel als auch Transkripte bereitstellen, die seinen Inhalt genau beschreiben. Untertitel, die mithilfe von WebVTT angegeben werden, ermöglichen es Menschen mit Hörbeeinträchtigungen, den Inhalt einer Audioaufnahme während der Wiedergabe zu verstehen, während Transkripte denen, die mehr Zeit benötigen, die Möglichkeit bieten, den Inhalt der Aufnahme in einem Tempo und Format zu überprüfen, das ihnen angenehm ist.

Wenn automatische Untertitelungsdienste verwendet werden, ist es wichtig, den erzeugten Inhalt zu überprüfen, um sicherzustellen, dass er die Quell-Audio korrekt wiedergibt.

Das <audio>-Element unterstützt WebVTT nicht direkt. Sie müssen eine Bibliothek oder ein Framework verwenden, das diese Funktionalität bietet, oder den Code selbst schreiben, um Untertitel anzuzeigen. Eine Möglichkeit besteht darin, Ihr Audio mit einem <video>-Element abzuspielen, welches WebVTT unterstützt.

Zusätzlich zu gesprochener Dialogführung sollten Untertitel und Transkripte auch Musik und Soundeffekte identifizieren, die wichtige Informationen übermitteln. Dies umfasst Emotion und Tonfall. Zum Beispiel, im WebVTT unten, beachten Sie die Verwendung von eckigen Klammern, um dem Betrachter Ton und emotionale Einsicht zu geben; dies kann helfen, die Stimmung zu etablieren, die sonst durch Musik, nonverbale Geräusche und wichtige 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 Download-Link) als Fallback für Benutzer anzubieten, 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: Captions, Transcripts, and Audio Descriptions
• MDN Verständnis von WCAG, Richtlinie 1.2 Erklärungen
• Verständnis von Erfolgskriterium 1.2.1 | W3C Verständnis von WCAG 2.0
• Verständnis von Erfolgskriterium 1.2.2 | W3C Verständnis von 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—sofern 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>

Für Details dazu, wann Autoplay funktioniert, wie Sie die Berechtigung zur Verwendung von Autoplay erhalten und wie und wann es angemessen ist, Autoplay zu verwenden, siehe unseren Autoplay-Leitfaden.

Dieses Beispiel gibt an, welcher Audiotrack mit dem src-Attribut auf einem verschachtelten <source>-Element eingebettet werden soll, anstatt direkt auf dem <audio>-Element. Es ist immer sinnvoll, den MIME-Type der Datei innerhalb des type-Attributs anzugeben, da der Browser sofort feststellen kann, ob er diese 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 Quell-Element (Opus) zu laden, wenn es abgespielt werden kann; falls nicht, wird das zweite (Vorbis) verwendet und schließlich MP3:

<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 Audio-Codecs, die im Web verwendet werden

• Web Audio API

• HTMLAudioElement

• <source>
• <video>

• Lernbereich: HTML-Video und -Audio

• Grundlagen von plattformübergreifendem Audio