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.

Das HTMLAudioElement-Interface bietet Zugriff auf die Eigenschaften von <audio>-Elementen sowie Methoden zu deren Manipulation.

Dieses Element basiert auf dem HTMLMediaElement-Interface und erbt von diesem Eigenschaften und Methoden.

EventTarget Node Element HTMLElement HTMLMediaElement HTMLAudioElement

Konstruktor

Audio()

Erstellt und gibt ein neues HTMLAudioElement-Objekt zurück. Optional kann der Ladevorgang einer Audio-Datei in das Objekt gestartet werden, wenn die Dateiadresse angegeben ist.

Instanz-Eigenschaften

Keine spezifischen Eigenschaften; erbt Eigenschaften von seinem Elterninterface HTMLMediaElement und vom HTMLElement.

Instanz-Methoden

Erbt Methoden von seinem Elterninterface HTMLMediaElement und vom HTMLElement. Es bietet keine eigenen Methoden an.

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 auf dem Element aufrufen

js
audioElement.play();

Hinweis: Ein häufiger Fehler ist der Versuch, ein Audio-Element direkt beim Laden der Seite abzuspielen. Die Standard-Autoplay-Richtlinie moderner Browser wird dies blockieren. Weitere Informationen finden Sie bei Firefox und Chrome für bewährte Verfahren und Umgehungen.

Einige der am häufigsten 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
});

Events

Erbt Methoden von seinem Elterninterface HTMLMediaElement und von seinem Vorfahren HTMLElement. Sie können Events mit addEventListener() überwachen oder einen Event-Listener an die oneventname-Eigenschaft dieses Interfaces zuweisen.

Spezifikationen

Specification
HTML
# htmlaudioelement

Browser-Kompatibilität

Siehe auch