HTMLAudioElement

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

Die HTMLAudioElement-Schnittstelle bietet Zugriff auf die Eigenschaften von <audio>-Elementen sowie Methoden zu ihrer Manipulation.

Dieses Element basiert auf der HTMLMediaElement-Schnittstelle und erbt Eigenschaften und Methoden von dieser.

EventTarget Node Element HTMLElement HTMLMediaElement HTMLAudioElement

Konstruktor

Audio()

Erstellt und gibt ein neues HTMLAudioElement-Objekt zurück und beginnt optional mit dem Laden einer Audiodatei, wenn die Datei-URL angegeben ist.

Instanz-Eigenschaften

Keine spezifischen Eigenschaften; erbt Eigenschaften von seinem Eltern-HTMLMediaElement und von HTMLElement.

Instanz-Methoden

Erbt Methoden von seinem Eltern-HTMLMediaElement und von HTMLElement. Es bietet keine eigenen Methoden.

Beispiele

Grundlegende Verwendung

Sie können ein HTMLAudioElement vollständig mit JavaScript unter Verwendung des Audio()-Konstruktors erstellen:

js
const audioElement = new Audio("car_horn.wav");

dann können Sie die play()-Methode für das Element aufrufen

js
audioElement.play();

Hinweis: Ein häufiger Stolperstein ist der Versuch, ein Audio-Element sofort beim Laden der Seite abzuspielen. Die standardmäßige Autoplay-Richtlinie moderner Browser verhindert dies. Weitere Informationen und Best Practices finden Sie unter Firefox und Chrome.

Einige der häufig verwendeten Eigenschaften des Audio-Elements sind src, currentTime, duration, paused, muted und volume. Dieses Snippet kopiert die Dauer der Audiodatei in eine Variable:

js
const audioElement = new Audio("car_horn.wav");
audioElement.addEventListener("loadeddata", () => {
  let duration = audioElement.duration;
  // The duration variable now holds the duration (in seconds) of the audio clip
});

Ereignisse

Erbt Methoden von seinem Eltern-HTMLMediaElement und von seinem Vorfahren HTMLElement. Hören Sie auf Ereignisse mithilfe von addEventListener() oder durch Zuweisen eines Ereignislisteners zur oneventname-Eigenschaft dieser Schnittstelle.

Spezifikationen

Specification
HTML Standard
# htmlaudioelement

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch