<audio>: Das Einbetten von Audio-Elementen

Das obige Beispiel zeigt die grundlegende Verwendung des <audio>-Elements. Ähnlich wie beim <img>-Element beinhalten wir einen Pfad zur Medienquelle, die wir über das src-Attribut einbetten wollen; wir können andere Attribute hinzufügen, um Informationen anzugeben, wie zum Beispiel, ob wir es automatisch abspielen und wiederholen lassen wollen, ob wir die Standard-Audiosteuerungen des Browsers anzeigen wollen, etc.

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 die Wiedergabe der Audiodatei automatisch, sobald dies möglich ist, ohne darauf zu warten, dass die gesamte Audiodatei heruntergeladen ist.

Hinweis: Webseiten, die automatisch Audiodateien (oder Videos mit Audiospuren) abspielen, können für Benutzer eine unangenehme Erfahrung darstellen und sollten nach Möglichkeit vermieden werden. Wenn Sie unbedingt Autoplay-Funktionalität anbieten müssen, sollten Sie es benutzerdefiniert machen (die Benutzer müssen es speziell aktivieren). Dies kann jedoch nützlich sein, wenn Medien-Elemente erstellt werden, deren Quelle zu einem späteren Zeitpunkt unter Benutzerkontrolle festgelegt wird. Siehe unseren Leitfaden zur Autoplay-Nutzung für zusätzliche Informationen zur korrekten 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ärkeregelung, Suchen und Pause/Fortsetzen der Wiedergabe.

controlslist

Das controlslist Attribut hilft dem Browser, auszuwählen, welche Steuerungen für das audio-Element angezeigt werden sollen, wann immer der Browser sein eigenes Set von Steuerungen anzeigt (also, wenn das controls-Attribut angegeben wird).

Die erlaubten Werte sind nodownload, nofullscreen und noremoteplayback.

crossorigin

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

use-credentials

Sendet eine Cross-Origin-Anfrage mit Berechtigung. Mit anderen Worten, es sendet den Origin: HTTP-Header mit einem Cookie, einem Zertifikat oder Durchführung von HTTP-Basis-Authentifizierung. Wenn der Server keine Berechtigungen für die Ursprungsseite gibt (durch den Access-Control-Allow-Credentials: HTTP-Header), wird die Ressource verunreinigt und ihre Nutzung wird eingeschränkt.

Wenn nicht vorhanden, wird die Ressource ohne CORS-Anfrage abgerufen (d.h. ohne Senden des Origin: HTTP-Headers), was ihre nicht verunreinigte Verwendung in <canvas>-Elementen verhindert. Wenn ungültig, wird es behandelt, als ob das enumerierte Schlüsselwort anonymous verwendet wurde. Siehe CORS-Einstellungsattribute für weitere Informationen.

disableremoteplayback

Ein Boolean-Attribut, das verwendet wird, um die Fähigkeit der Fernwiedergabe auf Geräten zu deaktivieren, die über kabelgebundene (HDMI, DVI usw.) und drahtlose Technologien (Miracast, Chromecast, DLNA, AirPlay usw.) angeschlossen sind. Siehe diese vorgeschlagene Spezifikation für weitere Informationen.

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

loop

Ein Boolean-Attribut: Wenn angegeben, springt der Audioplayer nach Erreichen des Endes der Audio-Datei automatisch zum Anfang zurück.

muted

Ein Boolean-Attribut, das angibt, ob die Audio-Datei anfänglich stummgeschaltet wird. Der Standardwert ist false.

preload

Dieses enumerierte 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 die Audioaufnahme nicht vorgeladen 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 nicht erwartet wird, dass der Benutzer sie nutzt.
• leerer String: Ein Synonym für den Wert auto.

Der Standardwert ist in jedem 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 ein bloßer Hinweis.

src

Die URL der einzubettenden Audio-Datei. Dies unterliegt den HTTP-Zugriffskontrollen. Dies ist optional; Sie können stattdessen das <source>-Element innerhalb des Audio-Blocks verwenden, um das einzubettende Audio anzugeben.

Browser unterstützen nicht alle dieselben Dateitypen und Audio-Codecs; Sie können mehrere Quellen innerhalb geschachtelter <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 Daten-URLs. Bei der Verwendung von HTTP(S)-URLs beachten Sie bitte, 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 bei kleinen Audiodateien nützlich sein kann, bei größeren Dateien jedoch nicht zu empfehlen ist, da es 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 bearbeiten, anstatt vorab vorhandene 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-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 durchsuchbar und unterstützen nur einen begrenzten Satz von Codecs.

Wir bieten einen umfassenden und gründlichen Leitfaden zu Medientypen und den Audio-Codecs, die darin verwendet werden können. Außerdem gibt es einen Leitfaden zu den unterstützten Codecs für Video.

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 mithilfe von JavaScript und der HTMLMediaElement API erstellen.
• Um genaue Kontrolle über Ihre Audioinhalte zu ermöglichen, feuern HTMLMediaElements viele verschiedene Ereignisse ab. Dies bietet auch eine Möglichkeit, den Abrufprozess der Audiodateien zu überwachen, damit Sie Fehler erkennen oder feststellen können, wann genug Daten zur Wiedergabe oder Bearbeitung zur Verfügung stehen.
• <audio>-Elemente können keine Untertitel oder Beschriftungen haben, wie es bei <video>-Elementen möglich ist. Siehe WebVTT und Audio von Ian Devlin für einige 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 Verwendung von HTML <audio> ist der HTML-Video- und Audio-Anfängerkurs.

Das <audio>-Element hat keine eigenen visuellen Ausgabe, es sei denn, das controls-Attribut ist angegeben; in diesem Fall werden die Standardsteuerungen des Browsers angezeigt.

Die Standardsteuerungen haben einen display-Wert von inline als Standard, 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 oder Ähnlichem platziert wird.

Sie können die Standardsteuerungen mit Eigenschaften stylen, die den Block als eine Einheit beeinflussen, sodass Sie ihm beispielsweise einen border und border-radius, padding, margin usw. geben können. 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 zwischen den verschiedenen Browsern.

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

Grundlagen der Videoplayerstilierung bietet einige nützliche Stiltechniken — es ist im Kontext von <video> geschrieben, aber vieles davon ist genauso anwendbar auf <audio>.

Sie können erkennen, wann Tracks zu einem <audio>-Element hinzugefügt oder daraus 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 HTMLMediaElement gesendet, das dem Track-Typ entspricht, der dem Element hinzugefügt wurde:

HTMLMediaElement.audioTracks

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

HTMLMediaElement.videoTracks

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

HTMLMediaElement.textTracks

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

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

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

Audio mit gesprochenen Dialogen sollte sowohl Untertitel als auch Transkripte bieten, die den Inhalt genau beschreiben. Mit (WebVTT) spezifizierte Untertitel ermöglichen es hörgeschädigten Personen, den Inhalt einer Audioaufnahme zu verstehen, während sie abgespielt wird, während Transkripte es Personen ermöglichen, die mehr Zeit benötigen, den Inhalt der Aufnahme in einem für sie komfortablen Tempo und Format zu überprüfen.

Wenn automatische Untertitelungsdienste verwendet werden, ist es wichtig, den generierten Inhalt zu prüfen, um sicherzustellen, dass er das Quell-Audio 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 dazu selbst schreiben. Eine Option besteht darin, Ihr Audio mit einem <video>-Element abzuspielen, das WebVTT unterstützt.

Neben gesprochenen Dialogen sollten auch Untertitel und Transkripte Musik- und Soundeffekte identifizieren, die wichtige Informationen vermitteln. Dazu gehören Emotionen und der Ton. Zum Beispiel wird im folgenden WebVTT die Verwendung von eckigen Klammern bemerkt, um dem Betrachter tonale und emotionale Einsicht zu geben; dies kann helfen, die Stimmung zu erzeugen, die ansonsten 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?

Außerdem ist es gute Praxis, einige Inhalte (wie den direkten Download-Link) als Fallback für Benutzer 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: Captions, Transcripts, and Audio Descriptions
• MDN Understanding WCAG, Guideline 1.2 explanations
• Understanding Success Criterion 1.2.1 | W3C Understanding WCAG 2.0
• Understanding Success Criterion 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 — sofern die Seite die Berechtigung 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>

Für Details dazu, wann Autoplay funktioniert, wie man die Erlaubnis dafür erhält und wie und wann Autoplay angemessen verwendet wird, siehe unseren Leitfaden zur Autoplay-Nutzung.

Dieses Beispiel gibt an, welcher Audiotrack eingebettet werden soll, indem das src-Attribut auf einem geschachtelten <source>-Element verwendet wird, anstatt direkt auf dem <audio>-Element. Es ist immer nützlich, den MIME-Typ der Datei im type-Attribut anzugeben, da der Browser sofort erkennen kann, ob er die Datei abspielen kann, und falls nicht, keine Zeit damit verschwendet.

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

Dieses Beispiel umfasst mehrere <source>-Elemente. Der Browser versucht, das erste Quell-Element (Opus) zu laden, wenn er es abspielen kann; wenn nicht, wechselt er zum zweiten (Vorbis) und schließlich zurück zu 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>

• Webmedientechnologien

  • Medien-Containerformate (Dateitypen)
  • Leitfaden zu Audio-Codecs, die im Web verwendet werden

• Web Audio API

• HTMLAudioElement

• <source>
• <video>

• Lernbereich: HTML-Video und -Audio

• Grundlagen der plattformübergreifenden Audiowiedergabe