`<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 Nutzung des <audio>-Elements. In ähnlicher Weise wie beim <img>-Element fügen wir einen Pfad zu den Medien ein, die wir im src-Attribut einbetten möchten; wir können andere Attribute hinzufügen, um Informationen zu spezifizieren, z. B. ob wir den Autostart wünschen und es wiederholen möchten, ob wir die Standard-Audiosteuerung des Browsers anzeigen lassen 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 boolesches Attribut: Wenn es angegeben wird, beginnt die Wiedergabe des Audios automatisch, sobald es möglich ist, ohne darauf zu warten, dass die gesamte Audiodatei heruntergeladen wird.

Hinweis: Websites, die automatisch Audio (oder Videos mit einer Tonspur) abspielen, können eine unangenehme Erfahrung für Benutzer sein und sollten, wenn möglich, vermieden werden. Wenn Sie dennoch Autoplay-Funktionalität anbieten müssen, sollten Sie diese als Opt-In-Funktion gestalten (es erfordert, dass der Benutzer sie speziell aktiviert). Dies kann jedoch nützlich sein, wenn Medien-Elemente erstellt werden, deren Quelle zu einem späteren Zeitpunkt unter Benutzersteuerung festgelegt wird. Siehe unseren Leitfaden zur Autoplay-Funktionalität für zusätzliche Informationen zur ordnungsgemäßen Verwendung von Autoplay.

controls

Wenn dieses Attribut vorhanden ist, bietet der Browser Steuerungen an, mit denen der Benutzer die Audiowiedergabe steuern kann, einschließlich Lautstärke, Spulen und Anhalten/Fortsetzen der Wiedergabe.

controlslist

Das controlslist-Attribut, wenn es angegeben wird, hilft dem Browser, auszuwählen, welche Steuerungen für das audio-Element angezeigt werden sollen, wann immer der Browser seine eigene Steuerelemente-Sammlung anzeigt (d.h. wenn das controls-Attribut angegeben ist).

Die erlaubten Werte sind nodownload, nofullscreen und noremoteplayback.

crossorigin

Dieses aufgezählte Attribut gibt an, ob CORS verwendet werden soll, um die zugehörige Audiodatei abzurufen. CORS-fähige Ressourcen können im <canvas>-Element ohne Kontaminierung wiederverwendet werden. Die erlaubten Werte sind:

anonymous

Sendet eine Cross-Origin-Anfrage ohne Berechtigungsnachweis. Das bedeutet, es wird der Origin:-HTTP-Header ohne Cookie, X.509-Zertifikat oder Durchführung der HTTP-Basisauthentifizierung gesendet. Wenn der Server der Ursprungsseite keine Berechtigungsnachweise gibt (indem er nicht den Access-Control-Allow-Origin:-HTTP-Header setzt), wird die Ressource kontaminiert, und ihre Verwendung ist eingeschränkt.

use-credentials

Sendet eine Cross-Origin-Anfrage mit einem Berechtigungsnachweis. Das bedeutet, es wird der Origin:-HTTP-Header mit einem Cookie, einem Zertifikat oder Durchführung der HTTP-Basisauthentifizierung gesendet. Wenn der Server der Ursprungsseite keine Berechtigungsnachweise gibt (durch den Access-Control-Allow-Credentials:-HTTP-Header), wird die Ressource kontaminiert und ihre Verwendung eingeschränkt.

Wenn nicht vorhanden, wird die Ressource ohne eine CORS-Anfrage abgerufen (d.h. ohne den Origin:-HTTP-Header zu senden), was ihre nicht kontaminierte Verwendung in <canvas>-Elementen verhindert. Wenn ungültig, wird es behandelt, als ob das aufgezählte Schlüsselwort anonymous verwendet wurde. Siehe CORS-Attribut zur Einstellung für zusätzliche Informationen.

disableremoteplayback

Ein boolesches Attribut, das die Fähigkeit zum Remote-Playback auf Geräten deaktiviert, die über kabelgebundene (HDMI, DVI usw.) und drahtlose Technologien (Miracast, Chromecast, DLNA, AirPlay usw.) verbunden sind. Siehe diese vorgeschlagene Spezifikation für weitere Informationen.

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

loop

Ein boolesches Attribut: Wenn es angegeben wird, springt der Audioplayer automatisch zurück zum Anfang, sobald das Ende des Audios erreicht ist.

muted

Ein boolesches Attribut, das angibt, ob das Audio anfänglich stummgeschaltet wird. Sein Standardwert ist false.

preload

Dieses aufgezählte Attribut soll dem Browser einen Hinweis 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 gesamte Audiodatei heruntergeladen werden kann, auch wenn der Benutzer sie wahrscheinlich nicht verwendet.
• leerer String: 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 beginnen, 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 des einzubettenden Audios. Dies unterliegt HTTP-Zugriffskontrollen. Es ist optional; Sie können stattdessen das <source>-Element innerhalb des Audio-Blocks verwenden, um das einzubettende Audio zu spezifizieren.

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 Data-URLs. Bei der Verwendung von HTTP(S)-URLs sollten Sie beachten, 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, aber nicht für größere Dateien empfohlen wird, da es die Dateigröße des HTML erhöht.

Sie können auch die Web Audio API verwenden, um direkt Audiostreams aus JavaScript-Code zu erzeugen und zu manipulieren, anstatt vorhandene Audiodateien zu streamen. Sie können das srcObject in JavaScript auf ein MediaStream-Objekt setzen. Dies wird häufig für Live-Audiostreams 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 fundierten und umfassenden Leitfaden zu Medien-Dateitypen und den Audiocodecs, die in ihnen verwendet werden können. Auch verfügbar ist ein Leitfaden zu den unterstützten Codecs für Video.

Weitere Nutzungshinweise:

• Wenn Sie das Attribut controls nicht angeben, wird der Audioplayer nicht die Standard-Steuerungen des Browsers enthalten. Sie können jedoch Ihre eigenen benutzerdefinierten Steuerungen mit JavaScript und der HTMLMediaElement API erstellen.
• Um die präzise Kontrolle über Ihre Audiowiedergabe zu ermöglichen, generieren HTMLMediaElements viele verschiedene Ereignisse. Dies bietet auch eine Möglichkeit, den Abrufprozess des Audios zu überwachen, damit Sie nach Fehlern suchen oder erkennen können, wann genug vorhanden ist, um mit der Wiedergabe zu beginnen oder es zu manipulieren.
• <audio>-Elemente können keine Untertitel oder Beschriftungen haben, die ihnen in der gleichen Weise zugeordnet sind, wie es bei <video>-Elementen der Fall ist. Siehe WebVTT und Audio von Ian Devlin für nützliche Informationen und Problemumgehungen.
• 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 eigenen visuellen Ausgaben, es sei denn, das controls-Attribut ist angegeben, in diesem Fall werden die Standard-Steuerungen des Browsers angezeigt.

Die Standard-Steuerungen haben standardmäßig einen display-Wert von inline, und es ist oft eine gute Idee, den Wert auf block zu setzen, um die Positionierung und das Layout besser zu kontrollieren, es sei denn, Sie möchten, dass es innerhalb eines Textblocks oder ähnlich sitzt.

Sie können die Standard-Steuerungen mit Eigenschaften gestalten, die den Block als einzelnes Ganzes betreffen, so können Sie ihm beispielsweise einen border und border-radius, padding, margin usw. geben. Sie können jedoch nicht die einzelnen Komponenten innerhalb des Audioplayers gestalten (z.B. die Größe der Schaltflächen ändern oder die Symbole, die Schriftart usw. ändern), und die Steuerungen sind in den verschiedenen Browsern unterschiedlich.

Um ein konsistentes Aussehen über Browser hinweg zu erzielen, müssen Sie benutzerdefinierte Steuerungen erstellen; diese können auf beliebige Weise 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 ebenso anwendbar auf <audio>.

Sie können erkennen, wenn 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 selbst gesendet. Stattdessen werden sie an das Track-Listenobjekt innerhalb des <audio>-Elements gesendet, das zum Typ der hinzugefügten Spur im HTMLMediaElement gehört:

HTMLMediaElement.audioTracks

Eine AudioTrackList, die alle Audiospuren des Medienelements enthält. 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 zum Element hinzugefügt werden.

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

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

Audio mit gesprochenem Dialog sollte sowohl Untertitel als auch Transkripte enthalten, die seinen Inhalt genau beschreiben. Untertitel, die mit WebVTT spezifiziert werden, ermöglichen es Menschen mit Hörbehinderung, den Inhalt einer Audioaufnahme zu verstehen, während diese wiedergegeben wird. Transkripte hingegen ermöglichen Menschen, die zusätzliche Zeit benötigen, den Inhalt der Aufnahme in einem für sie angenehmen Tempo und Format zu überprüfen.

Wenn automatische Untertitulierung verwendet wird, ist es wichtig, den generierten Inhalt zu überprüfen, um sicherzustellen, dass er die Ausgangsaudioquelle genau wiedergibt.

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

Zusätzlich zu gesprochenem Dialog sollten Untertitel und Transkripte auch Musik und Soundeffekte identifizieren, die wichtige Informationen liefern. Dazu gehören Emotion und Ton. Zum Beispiel, im unten stehenden WebVTT wird die Verwendung von eckigen Klammern genutzt, um dem Betrachter den Ton und die emotionale Einsicht zu geben; dies kann helfen, die Stimmung zu etablieren, die sonst mit Musik, nonverbalen Geräuschen und wichtigen Soundeffekten vermittelt 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, etwas Inhalt (wie einen direkten Download-Link) als Fallback bereitzustellen, für Zuschauer, 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 Audio Descriptions
• MDN Verständnis von WCAG, Richtlinien 1.2 Erklärungen
• Verständnis des Erfolgskriteriums 1.2.1 | W3C Verständnis von WCAG 2.0
• Verständnis des Erfolgskriteriums 1.2.2 | W3C Verständnis von WCAG 2.0

Das folgende Beispiel zeigt die grundlegende Verwendung des <audio>-Elements zur Wiedergabe einer OGG-Datei. Es wird automatisch abgespielt dank des autoplay-Attributs—falls der Seite die Erlaubnis dazu erteilt wurde—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, wann Autoplay funktioniert, wie Sie die Erlaubnis zur Nutzung von Autoplay erhalten und wie und wann es angemessen ist, Autoplay zu verwenden, siehe unseren Leitfaden zur Autoplay-Funktionalität.

Dieses Beispiel gibt die einzubettende Audiodatei über das src-Attribut eines verschachtelten <source>-Elements anstatt direkt im <audio>-Element an. 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 nicht unnötig Zeit damit 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 enthält mehrere <source>-Elemente. Der Browser versucht, das erste Source-Element (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>

• Web-Medien-Technologien

  • Media-Container-Formate (Dateitypen)
  • Leitfaden zu Audiocodecs im Web

• Web Audio API

• HTMLAudioElement

• <source>
• <video>

• Lernbereich: HTML-Video und -Audio

• Grundlagen der browserübergreifenden Audiowiedergabe