<audio>: Das eingebettete Audio-Element

<figure>
  <figcaption>Listen to the T-Rex:</figcaption>
  <audio controls src="/https/developer.mozilla.org/shared-assets/audio/t-rex-roar.mp3"></audio>
  <a href="/https/developer.mozilla.org/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 dem <img>-Element fügen wir einen Pfad zu dem Medium ein, das wir einbetten möchten, indem wir das src-Attribut verwenden; wir können andere Attribute hinzufügen, um Informationen wie automatisches Abspielen und Schleifen, das Anzeigen der Standard-Audiosteuerelemente des Browsers usw. anzugeben.

Der Inhalt zwischen dem öffnenden und schließenden <audio></audio>-Tag 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 es angegeben ist, beginnt die Audio-Wiedergabe automatisch, sobald sie dies tun kann, ohne auf das vollständige Herunterladen der gesamten Audiodatei zu warten.

Hinweis: Websites, die automatisch Audio (oder Videos mit einer Audiounterspur) abspielen, können für Benutzer ein unangenehmes Erlebnis sein und sollten daher nach Möglichkeit vermieden werden. Wenn Sie eine Autoplay-Funktionalität anbieten müssen, sollten Sie sie opt-in gestalten (indem der Benutzer spezifisch aktiviert). Dies kann jedoch nützlich sein, wenn Medien-Elemente erstellt werden, deren Quelle zu einem späteren Zeitpunkt unter Benutzerkontrolle festgelegt wird. Siehe unseren Autoplay-Leitfaden für zusätzliche Informationen zur richtigen Verwendung von Autoplay.

controls

Wenn dieses Attribut vorhanden ist, bietet der Browser Steuerelemente an, damit der Benutzer die Audiowiedergabe steuern kann, einschließlich Lautstärke, Suchen und Pausieren/Fortsetzen der Wiedergabe.

controlslist

Das controlslist-Attribut hilft dem Browser, auszuwählen, welche Steuerelemente für das audio-Element angezeigt werden sollen, wann immer der Browser seine eigenen Steuerelemente anzeigt (d.h. 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 zu laden. CORS-aktivierte Ressourcen können im <canvas>-Element wiederverwendet werden, ohne verfälscht zu werden. Die erlaubten Werte sind:

anonymous

Sendet eine Cross-Origin-Anfrage ohne Anmeldedaten. Mit anderen Worten, es sendet den Origin:-HTTP-Header ohne Cookie, X.509-Zertifikat oder 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 verfälscht und ihre Nutzung eingeschränkt.

use-credentials

Sendet eine Cross-Origin-Anfrage mit Anmeldedaten. Mit anderen Worten, es sendet den Origin:-HTTP-Header zusammen mit einem Cookie, einem Zertifikat oder einer HTTP-Basisauthentifizierung. Wenn der Server keine Anmeldeinformationen an die Ursprungsseite gibt (durch den Access-Control-Allow-Credentials:-HTTP-Header), wird die Ressource verfälscht und ihre Nutzung eingeschränkt.

Wenn nicht vorhanden, wird die Ressource ohne CORS-Anfrage abgerufen (d.h. ohne Senden des Origin:-HTTP-Headers), wodurch ihre unverfälschte Verwendung in <canvas>-Elementen verhindert wird. Wenn ungültig, wird es so behandelt, als ob das aufgelistete Schlüsselwort anonymous verwendet wurde. Siehe CORS-Einstellungen Attribute für zusätzliche Informationen.

disableremoteplayback

Ein boolesches Attribut, das verwendet wird, um die Fähigkeit zur Remote-Wiedergabe in Geräten zu deaktivieren, die über kabelgebundene (HDMI, DVI, etc.) und drahtlose Technologien (Miracast, Chromecast, DLNA, AirPlay, etc.) angeschlossen sind. Siehe die vorgeschlagene Remote Playback API-Spezifikation für weitere Informationen.

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

loop

Ein boolesches Attribut: Wenn es angegeben ist, wird der Audioplayer automatisch zum Anfang zurücksuchen, sobald das Ende der Audio erreicht ist.

muted

Ein boolesches Attribut, das angibt, ob der Ton initially stumm geschaltet sein wird. Der Standardwert ist false.

preload

Dieses enumerierte Attribut soll dem Browser einen Hinweis geben, was der Autor denkt, dass dies zu einem besten Benutzererlebnis führen wird. Es kann einen der folgenden Werte haben:

• none: Gibt an, dass die 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, selbst wenn nicht erwartet wird, dass der Benutzer sie verwendet.
• leerer String: Ein Synonym für den Wert auto.

Der Standardwert ist in jedem Browser unterschiedlich. Die Spezifikation empfiehlt, sie auf metadata zu setzen.

Hinweis:

• Das autoplay-Attribut hat Vorrang vor preload. Wenn autoplay angegeben ist, muss der Browser offensichtlich mit dem Herunterladen des Audios für die Wiedergabe beginnen.
• Der Browser ist nicht gezwungen, den Wert dieses Attributs zu befolgen; es ist nur 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 Audioblocks verwenden, um das Audio zu spezifizieren, das eingebettet werden soll.

Browser unterstützen nicht alle dieselben Dateitypen und Audiocodecs; Sie können mehrere Quellen innerhalb verschachtelter <source>-Elemente angeben, 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. Beim Verwenden 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 für größere Dateien nicht empfohlen wird, da dies die HTML-Dateigröße erhöht.

Beim Verwenden 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 am <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 Audiostreams von JavaScript-Code zu generieren und zu manipulieren, anstatt vorgefertigte 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 den Medientypen und den Audiocodecs, die darin verwendet werden können. Auch verfügbar ist ein Leitfaden zu den für Videos unterstützten Codecs.

Weitere Verwendungshinweise:

• Wenn Sie das controls-Attribut nicht angeben, wird der Audioplayer keine Standardsteuerungselemente des Browsers enthalten. Sie können jedoch Ihre eigenen benutzerdefinierten Steuerelemente mit JavaScript und der HTMLMediaElement-API erstellen.
• Um genaue Kontrolle über Ihre Audioinhalte zu ermöglichen, lösen HTMLMediaElements viele verschiedene Ereignisse aus. Dies bietet auch eine Möglichkeit, den Ladeprozess des Audios zu überwachen, sodass Sie Fehler beobachten oder erkennen können, wann genug verfügbar ist, um zu beginnen, es abzuspielen oder zu manipulieren.
• <audio>-Elemente können keine Untertitel oder Bildunterschriften in derselben Weise wie <video>-Elemente haben. Siehe WebVTT and Audio von Ian Devlin für einige nützliche Informationen und Workarounds.
• Um die Ausweichinhalte 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ängertutorial.

Das <audio>-Element hat, wenn nicht das controls-Attribut angegeben ist, keine eigenen intrinsischen visuellen Ausgaben, es sei denn die Standardsteuerelemente des Browsers werden angezeigt.

Die Standardsteuerelemente haben normalerweise einen display-Wert von inline, und es ist oft eine gute Idee, den Wert auf block zu setzen, um die Kontrolle über die Positionierung und das Layout zu verbessern, es sei denn, Sie möchten, dass es innerhalb eines Textblocks oder Ähnlichem sitzen.

Sie können die Standardsteuerelemente mit Eigenschaften stylen, die den Block als eine einzelne Einheit beeinflussen. Sie können ihm zum Beispiel einen border und border-radius, padding, margin usw. verleihen. Sie können jedoch die einzelnen Komponenten innerhalb des Audioplayers nicht stylen (z. B. die Größe der Schaltflächen oder Symbole ändern, die Schriftart ändern usw.), und die Steuerelemente sind in den verschiedenen Browsern unterschiedlich.

Um einen konsistenten Look across verschiedene Browser zu erreichen, müssen Sie benutzerdefinierte Steuerelemente erstellen; diese können in jeder gewünschten Art und Weise ausgezeichnet und gestylt werden, und dann kann JavaScript zusammen mit der HTMLMediaElement-API verwendet werden, um deren Funktionalität zu verbinden.

Video-Player-Styling-Grundlagen bieten einige nützliche Stylingtechniken – sie sind 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 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 Tracklist-Objekt innerhalb des <audio>-Elements gesendet, das dem Typ des hinzugefügten Tracks entspricht:

HTMLMediaElement.audioTracks

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

HTMLMediaElement.videoTracks

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

HTMLMediaElement.textTracks

Fügen Sie einen addtrack-Listener für dieses TextTrackList-Element hinzu, um benachrichtigt zu werden, wenn neue Texttracks zum Element hinzugefügt werden.

Zum Beispiel um zu erkennen, wann Audiotracks zu oder aus 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 beobachtet, wann Audiotracks zum Element hinzugefügt oder daraus entfernt werden, und ruft eine hypothetische Funktion auf einem Track-Editor auf, um den Track bei der Liste der verfügbaren Tracks im Editor zu registrieren oder zu entfernen.

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

Audio mit gesprochener Dialogspur sollte sowohl Untertitel als auch Transkripte bereitstellen, die dessen Inhalt genau beschreiben. Untertitel, die über WebVTT festgelegt werden, ermöglichen es hörgeschädigten Personen, den Inhalt einer Audioaufnahme zu verstehen, während diese abgespielt wird, während Transkripte Personen, die zusätzliche Zeit benötigen, ermöglichen, den Inhalt der Aufnahme in einem Tempo und Format zu überprüfen, das für sie angenehm ist.

Wenn automatische Untertitelungsdienste verwendet werden, ist es wichtig, die generierten Inhalte zu überprüfen, um sicherzustellen, dass sie den Quell-Audioinhalten genau entsprechen.

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

Zusätzlich zu gesprochenen Dialogen sollten Untertitel und Transkripte auch Musik und Soundeffekte identifizieren, die wichtige Informationen kommunizieren. Dies schließt Emotion und Ton ein. Zum Beispiel beachten Sie in dem unten stehenden WebVTT die Verwendung von eckigen Klammern, um dem Betrachter Ton und emotionale Einsicht zu geben; dies kann helfen, die Atmosphäre zu etablieren, die sonst durch Musik, nonverbale Geräusche und wesentliche Soundeffekte bereitgestellt wird, 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 eine gute Praxis, einige Inhalte (wie den Direktdownload-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 Audio-Beschreibungen
• MDN Verständnis der WCAG, Leitlinie 1.2 Erklärungen
• Verständnis für Erfolgskriterium 1.2.1 | W3C Verständnis WCAG 2.0
• Verständnis für Erfolgskriterium 1.2.2 | W3C Verständnis WCAG 2.0

Das folgende Beispiel zeigt die grundlegende Verwendung des <audio>-Elements, um eine OGG-Datei abzuspielen. Es wird automatisch abgespielt, sofern die Seite dazu berechtigt ist, und beinhaltet 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 Sie die Berechtigung für die Verwendung von Autoplay erhalten und wie und wann es angemessen ist, Autoplay zu verwenden, siehe unseren Autoplay-Leitfaden.

Dieses Beispiel gibt an, 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 anzugeben, da der Browser sofort erkennen kann, ob er diese Datei abspielen kann und keine Zeit 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 umfasst mehrere <source>-Elemente. Der Browser versucht, das erste Quell-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-Medientechnologien

  • Mediencontainerformate (Dateitypen)
  • Leitfaden zu den auf dem Web verwendeten Audiocodecs

• Web Audio API

• HTMLAudioElement

• <source>
• <video>

• Lernbereich: HTML-Video und -Audio

• Audio-Grundlagen für Browser