<audio>: Das Audio einbetten-Element

Das obige Beispiel zeigt die grundlegende Verwendung des <audio> Elements. In ähnlicher Weise wie beim <img> Element fügen wir im src Attribut einen Pfad zu dem Medium ein, das wir einbetten möchten; wir können andere Attribute hinzufügen, um Informationen wie Autoplay und Schleife festzulegen, ob wir die standardmäßigen Audiosteuerungen des Browsers anzeigen möchten, 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, 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 abspielen (oder Videos mit einem Audiotrack), können für Benutzer unangenehm sein und sollten nach Möglichkeit vermieden werden. Wenn Sie Autoplay-Funktionalität anbieten müssen, sollten Sie dies zur Opt-in machen (erfordern, dass ein Benutzer dies speziell ermöglicht). Dies kann jedoch nützlich sein, wenn Sie Medien-Elemente erstellen, deren Quelle zu einem späteren Zeitpunkt unter Benutzerkontrolle festgelegt wird. Weitere Informationen zur richtigen 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, Suchlauf und Wiedergabe/Pause.

controlslist

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

anonymous

Sendet eine CORS-Anfrage ohne Anmeldeinformation. Mit anderen Worten, es sendet den Origin: HTTP-Header ohne Cookie, X.509 Zertifikat oder Durchführung der HTTP-Basisauthentifizierung. Wenn der Server keine Anmeldeinformationen an die Ursprungsseite gibt (indem er den Access-Control-Allow-Origin: HTTP-Header nicht setzt), wird die Ressource beschädigt und ihre Nutzung eingeschränkt.

use-credentials

Sendet eine CORS-Anfrage mit Anmeldeinformation. Mit anderen Worten, es sendet den Origin: HTTP-Header mit einem Cookie, einem Zertifikat oder Durchführung der HTTP-Basisauthentifizierung. Wenn der Server keine Anmeldeinformationen an die Ursprungsseite gibt (durch den Access-Control-Allow-Credentials: HTTP-Header), wird die Ressource beschädigt und ihre Nutzung eingeschränkt.

Wenn nicht vorhanden, wird die Ressource ohne CORS-Anfrage abgerufen (d.h. ohne den Origin: HTTP-Header zu senden), was eine nicht-beschädigte Nutzung in <canvas> Elementen verhindert. Falls ungültig, wird sie behandelt, als wäre das aufzählbare Schlüsselwort anonymous verwendet worden. Siehe CORS-Einstellungen Attribute für zusätzliche Informationen.

disableremoteplayback

Ein boolesches Attribut zur Deaktivierung der Fähigkeit zur Remote-Wiedergabe auf Geräten, die über Kabel (HDMI, DVI, etc.) und drahtlose Technologien (Miracast, Chromecast, DLNA, AirPlay, etc.) verbunden sind. Weitere Informationen finden Sie in dieser vorgeschlagenen Spezifikation.

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

loop

Ein boolesches Attribut: Wenn angegeben, wird der Audioplayer beim Erreichen des Endes der Audio automatisch zum Anfang zurückkehren.

muted

Ein boolesches Attribut, das anzeigt, ob das Audio initial stummgeschaltet sein wird. Sein Standardwert ist false.

preload

Dieses aufgezählte Attribut soll einen Hinweis auf den Browser 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 Audio-Metadaten (z. B. Länge) abgerufen werden.
• auto: Gibt an, dass die gesamte Audiodatei heruntergeladen werden kann, auch wenn der Benutzer sie voraussichtlich nicht verwendet.
• 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, 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 reiner Hinweis.

src

Die URL des einzubettenden Audios. 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.

Nicht alle Browser unterstützen dieselben 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. Beim Verwenden von HTTP(S) URLs sollten Sie beachten, dass das Caching-Verhalten des Browsers beeinflusst, wie oft die Datei vom Server abgerufen wird. Data-URLs betten die Audiodaten direkt im HTML ein, was nützlich für kleine Audiodateien sein kann, aber nicht für größere Dateien empfohlen wird, 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 erzeugen und zu manipulieren, anstatt vorbestehende 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 durchsuchbar und unterstützen nur eine begrenzte Anzahl von Codecs.

Wir bieten einen substanziellen und gründlichen Leitfaden zu Medientypen und den Audio-Codecs, die darin 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 standardmäßigen Steuerungen des Browsers. Sie können jedoch Ihre eigenen benutzerdefinierten Steuerungen mit JavaScript und der HTMLMediaElement API erstellen.
• Um eine präzise Kontrolle über Ihre Audiowiedergabe zu ermöglichen, feuern HTMLMediaElements viele verschiedene Ereignisse. Dies bietet auch eine Möglichkeit, den Abrufprozess des Audios zu überwachen, sodass Sie Fehler erkennen oder feststellen können, wann genug verfügbar ist, um es zu spielen oder zu manipulieren.
• <audio> Elemente können keine Untertitel oder Bildunterschriften mit ihnen assoziieren in der gleichen Weise wie <video> Elemente. 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 existierendes Element wie <notanaudio> ersetzen.

Eine gute allgemeine Informationsquelle zur Verwendung des HTML <audio> Elements ist das Video- und Audio-Inhalt Anfänger-Tutorial.

Das <audio> Element hat keine intrinsische visuelle Ausgabe, es sei denn, das controls Attribut ist angegeben, in diesem Fall werden die standardmäßigen Steuerungen des Browsers angezeigt.

Die Standardsteuerungen haben einen display Wert von inline standardmäßig, und es ist oft eine gute Idee, den Wert auf block zu setzen, um mehr Kontrolle über die Positionierung und das Layout zu haben, es sei denn, Sie möchten es innerhalb eines Textblocks oder ähnlichem platzieren.

Sie können die standardmäßigen Steuerungen mit Eigenschaften, die den Block als eine Einheit beeinflussen, stylen, sodass Sie ihm beispielsweise 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 Größe der Buttons oder Icons ändern, die Schriftart ändern, etc.), und die Steuerungen sind in den verschiedenen Browsern unterschiedlich.

Um ein konsistentes Aussehen und Gefühl über die Browser hinweg zu erzielen, müssen Sie benutzerdefinierte Steuerungen erstellen; diese können markiert und in beliebiger Weise gestylt werden, und dann kann JavaScript zusammen mit der HTMLMediaElement API verwendet werden, um ihre Funktionalität zu verbinden.

Grundlagen zur Videoplayer-Gestaltung bietet einige nützliche Styling-Techniken — es ist im Kontext von <video> geschrieben, aber vieles gilt gleichermaßen für <audio>.

Sie können erkennen, wann Spuren zu einem <audio> Element hinzugefügt und entfernt werden, indem Sie die Ereignisse addtrack und removetrack verwenden. Diese Ereignisse werden jedoch nicht direkt zum <audio> Element selbst gesendet. Stattdessen werden sie an das Objekt der Spurenliste innerhalb des <audio> Elements gesendet, das dem Typ der hinzugefügten Spur entspricht:

HTMLMediaElement.audioTracks

Eine AudioTrackList, die alle Audiospuren des Medienelements enthält. Sie können einen Listener für addtrack an dieses Objekt anhängen, 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 benachrichtigt zu werden, wenn Video-Spuren zum Element hinzugefügt werden.

HTMLMediaElement.textTracks

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

Zum Beispiel, um zu erkennen, wann Audiospuren zu oder von einem <audio> Element hinzugefügt 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 das Hinzufügen und Entfernen von Audiospuren zum Element 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 Ereignisse addtrack und removetrack zu hören.

Audio mit gesprochenem Dialog sollte sowohl Bildunterschriften als auch Transkripte enthalten, die seinen Inhalt genau beschreiben. Bildunterschriften, die mit Hilfe von WebVTT angegeben werden, ermöglichen Menschen mit Hörbehinderungen, den Inhalt einer Audioaufnahme zu verstehen, während die Aufnahme abgespielt wird, während Transkripte es Menschen, die mehr Zeit benötigen, ermöglichen, den Inhalt der Aufnahme in einem für sie angenehmen Tempo und Format zu überprüfen.

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

Das <audio> Element unterstützt WebVTT nicht direkt. Sie müssen eine Bibliothek oder ein Framework finden, das diese Fähigkeit bietet, oder den Code selbst schreiben, um Bildunterschriften 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 kommunizieren. Dies umfasst Emotionen und Ton. Zum Beispiel wird im folgenden WebVTT die Verwendung von eckigen Klammern bemerkt, um dem Zuschauer ein Gefühl von Ton und emotionaler Einsicht zu geben; dies kann helfen, die Stimmung zu schaffen, die sonst durch Musik, nonverbale Geräusche und wichtige Soundeffekte vermittelt 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, einigen Inhalt (wie den direkten Download-Link) als Fallback bereitzustellen, für Benutzer, die einen Browser verwenden, bei 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: Beschriftungen, Transkripte und Audiobeschreibungen
• MDN Verständnis von WCAG, Guideline 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 Nutzung des <audio> Elements, um eine OGG-Datei abzuspielen. Es wird aufgrund des autoplay Attributs automatisch abgespielt—wenn 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>

Details darüber, wann Autoplay funktioniert, wie Sie die Berechtigung zur Verwendung von Autoplay erhalten und wann es angemessen ist, Autoplay zu verwenden, finden Sie in unserem Autoplay-Leitfaden.

Dieses Beispiel gibt an, welchen Audiotrack eingebettet werden soll, indem das src Attribut auf einem verschachtelten <source> Element anstelle des direkten <audio> Elements verwendet wird. 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 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 Quellen-Element (Opus) zu laden, wenn er es abspielen kann; falls nicht, wechselt er zum zweiten (Vorbis) und schließlich 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>

• Web-Medientechnologien

  • Mediencontainerformate (Dateitypen)
  • Leitfaden zu Audio-Codecs im Web

• Web Audio API

• HTMLAudioElement

• <source>
• <video>

• Lernbereich: Video- und Audioinhalte

• Cross-browser Audio Grundlagen