<audio>: Das Einbetten eines Audio-Elements

<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 den Medien ein, die wir im src-Attribut einbetten möchten; wir können andere Attribute hinzufügen, um Informationen wie beispielsweise das automatische Abspielen oder Wiederholen anzugeben oder ob wir die Standard-Audiosteuerungen des Browsers anzeigen möchten.

Der Inhalt zwischen den ö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 Boolean-Attribut: Wenn angegeben, beginnt das Audio automatisch mit der Wiedergabe, sobald es dazu in der Lage ist, ohne darauf zu warten, dass die gesamte Audiodatei heruntergeladen wurde.

Hinweis: Seiten, die automatisch Audio (oder Videos mit einer Tonspur) abspielen, können eine unangenehme Erfahrung für Benutzer sein und sollten vermieden werden, wenn möglich. Wenn Sie dennoch eine Autoplay-Funktion anbieten müssen, sollten Sie diese als Opt-in gestalten (erfordert, dass ein Benutzer sie ausdrücklich aktiviert). Dies kann jedoch nützlich sein, wenn mediale Quellen erstellt werden, deren Quelle später unter Benutzerkontrolle festgelegt wird. Unseren Autoplay-Leitfaden finden Sie hier für zusätzliche Informationen dazu, wie Sie Autoplay ordnungsgemäß verwenden.

controls

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

controlslist

Das controlslist-Attribut hilft, wenn angegeben, dem Browser bei der Auswahl, welche Steuerungen für das audio-Element angezeigt werden, wann immer der Browser seine eigenen Steuerungssätze anzeigt (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 ohne Verunreinigung wiederverwendet werden. Die erlaubten Werte sind:

anonymous

Sendet eine Cross-Origin-Anfrage ohne Berechtigungsnachweis. Anders ausgedrückt: Es sendet den Origin:-HTTP-Header ohne ein Cookie, ein X.509-Zertifikat oder die Durchführung einer HTTP-Basisauthentifizierung. Wenn der Server der Ursprungssite keine Berechtigungen gibt (indem der Access-Control-Allow-Origin:-HTTP-Header nicht gesetzt wird), wird die Ressource verunreinigt und ihre Nutzung eingeschränkt.

use-credentials

Sendet eine Cross-Origin-Anfrage mit einem Berechtigungsnachweis. Das bedeutet, dass der Origin:-HTTP-Header mit einem Cookie, einem Zertifikat oder der Durchführung einer HTTP-Basisauthentifizierung gesendet wird. Wenn der Server der Ursprungssite keine Berechtigungen gibt (durch 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 Senden des Origin:-HTTP-Headers), was die nicht verunreinigte Verwendung in <canvas>-Elementen verhindert. Bei Ungültigkeit wird es so behandelt, als wäre das enumerierte Schlüsselwort anonymous verwendet worden. Siehe CORS-Einstellungen Attribute für zusätzliche Informationen.

disableremotoplayback

Ein Boolean-Attribut, das verwendet wird, um die Fähigkeit zur Fernwiedergabe auf Geräten zu deaktivieren, die mit kabelgebundenen (HDMI, DVI usw.) und drahtlosen Technologien (Miracast, Chromecast, DLNA, AirPlay usw.) verbunden sind. Siehe den vorgeschlagenen Remote Playback API-Spezifikationen für weitere Informationen.

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

loop

Ein Boolean-Attribut: Wenn angegeben, sucht der Audioplayer automatisch wieder zum Anfang, sobald das Ende des Audios erreicht ist.

muted

Ein Boolean-Attribut, das angibt, ob das Audio initial stummgeschaltet wird. Der Standardwert ist false.

preload

Dieses enumerierte Attribut ist dazu gedacht, dem Browser einen Hinweis darauf zu 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 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 Wert auto.

Der Standardwert ist für jeden Browser unterschiedlich. Die Spezifikation empfiehlt, es auf metadata zu setzen.

Hinweis:

• Das autoplay-Attribut hat Vorrang vor preload. Wenn autoplay angegeben ist, müsste der Browser natürlich damit beginnen, das Audio für die Wiedergabe herunterzuladen.
• Der Browser ist durch die Spezifikation nicht gezwungen, den Wert dieses Attributs zu befolgen; es ist nur ein Hinweis.

src

Die URL des einzubettenden Audios. Dies unterliegt 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 bereitstellen, 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. Wenn HTTP(S)-URLs verwendet werden, beachten Sie, dass das Cache-Verhalten des Browsers beeinflusst, wie oft die Datei vom Server angefordert wird. Data-URLs betten die Audiodaten direkt in das HTML ein, was bei kleinen Audiodateien nützlich sein kann, aber für größere Dateien nicht empfohlen wird, da dies die Größe der HTML-Datei erhöht.

Wenn <source>-Elemente verwendet werden, versucht der Browser, jede Quelle nacheinander zu laden. Wenn eine Quelle fehlschlägt (z. B. wegen 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 Audio-Streams direkt zu erzeugen und zu bearbeiten, anstatt 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-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 sind nicht suchbar und unterstützen nur eine begrenzte Anzahl von Codecs.

Wir bieten einen umfassenden und ausführlichen Leitfaden zu Medientypen und den AUDIO-Codecs, die innerhalb dieser verwendet werden können. Ebenfalls verfügbar ist ein Leitfaden zu den unterstützten Codecs für Video.

Andere Nutzungshinweise:

• Wenn Sie das controls-Attribut nicht angeben, enthält der Audioplayer nicht die Standardsteuerungen des Browsers. Sie können jedoch Ihre eigenen benutzerdefinierten Steuerelemente mit JavaScript und der HTMLMediaElement-API erstellen.
• Um Ihnen eine präzise Kontrolle über Ihren Audioinhalt zu ermöglichen, lösen HTMLMediaElements viele verschiedene Events aus. Dies bietet auch eine Möglichkeit, den Abrufvorgang des Audios zu überwachen, damit Sie Fehler erkennen oder feststellen können, wann genug verfügbar ist, um mit der Wiedergabe zu beginnen oder es zu manipulieren.
• <audio>-Elemente können keine Untertitel oder Bildunterschriften zugeordnet bekommen, wie <video>-Elemente es können. Siehe WebVTT und 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 keinen eigenen visuellen Output, es sei denn, das controls-Attribut ist angegeben, in diesem Fall werden die Standardsteuerungen des Browsers angezeigt.

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 sitzt.

Sie können die Standardsteuerungen mit Eigenschaften stylen, die den Block als Ganzes betreffen. Beispielsweise können Sie ihm eine border und border-radius, padding, margin usw. geben. Sie können jedoch nicht die einzelnen Komponenten innerhalb des Audioplayers stylen (z. B. die Größe der Schaltflächen oder Symbole ändern, die Schriftart ändern usw.), und die Steuerungen unterscheiden sich je nach Browser.

Um ein konsistentes Aussehen und Gefühl zwischen den Browsern zu erreichen, müssen Sie benutzerdefinierte Steuerungen erstellen; diese können auf beliebige Weise markiert und gestylt werden, und dann kann JavaScript zusammen mit der HTMLMediaElement-API verwendet werden, um deren Funktionalität zu verknüpfen.

Grundlagen der Videoplayer-Stilierung bietet einige nützliche Stiltechniken — sie sind im Kontext von <video> geschrieben, aber vieles davon ist auch für <audio> anwendbar.

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-Listenobjekt 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 addtrack-Listener zu diesem Objekt hinzufügen, um benachrichtigt zu werden, wenn neue Audio-Tracks zum Element hinzugefügt werden.

HTMLMediaElement.videoTracks

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

HTMLMediaElement.textTracks

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

Um beispielsweise zu erkennen, wann Audio-Tracks 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 beobachtet das Hinzufügen und Entfernen von Audiotracks am Element 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 zu überwachen.

Audio mit gesprochenem Dialog sollte sowohl Untertitel als auch Transkripte bereitstellen, die den Inhalt genau beschreiben. Untertitel, die mit WebVTT angegeben werden, ermöglichen es Menschen mit Hörbeeinträchtigungen, den Inhalt einer Audioaufnahme zu verstehen, während die Aufnahme abgespielt wird, während Transkripte es Menschen ermöglichen, die zusätzliche Zeit benötigen, 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 generierten Inhalt zu überprüfen, um sicherzustellen, dass er die Quellaudio korrekt darstellt.

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 mit einem <video>-Element abzuspielen, das WebVTT unterstützt.

Neben gesprochenem Dialog sollten Untertitel und Transkripte auch Musik und Soundeffekte identifizieren, die wichtige Informationen kommunizieren. Dies schließt Emotionen und Tonfall ein. Zum Beispiel wird im WebVTT unten die Verwendung von eckigen Klammern bemerkt, um dem Zuschauer Ton und emotionale Einsichten zu vermitteln; dies kann helfen, die durch Musik, nonverbale Geräusche und entscheidende Soundeffekte vermittelte Stimmung zu etablieren und so weiter.

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 gute Praxis, einen Inhalt (wie den direkten Download-Link) 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, Transkripte und Audiobeschreibungen
• MDN Verständnis für WCAG, Leitlinie 1.2 Erklärungen
• Verständnis des Erfolgskriteriums 1.2.1 | W3C Verständnis WCAG 2.0
• Verständnis des Erfolgskriteriums 1.2.2 | W3C Verständnis WCAG 2.0

Das folgende Beispiel zeigt die grundlegende Verwendung des <audio>-Elements zum Abspielen einer OGG-Datei. Es wird dank des autoplay-Attributs automatisch abgespielt, wenn die Seite die Erlaubnis 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>

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

In diesem Beispiel wird angegeben, welcher Audiotrack eingebettet werden soll, indem das src-Attribut auf einem verschachtelten <source>-Element anstelle direkt auf dem <audio>-Element verwendet wird. Es ist immer nützlich, den MIME-Typ der Datei im type-Attribut zu spezifizieren, da der Browser sofort bestimmen kann, ob er diese Datei abspielen kann, und keine Zeit darauf 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; wenn nicht, fällt er auf das zweite (Vorbis) zurück und schließlich auf 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 Audiocodecs, die im Web verwendet werden

• Web Audio API

• HTMLAudioElement

• <source>
• <video>

• Lernbereich: HTML-Video und -Audio

• Grundlagen zu plattformübergreifendem Audio