HTMLMediaElement.duration — Eigenschaft · JavaScript-Referenz

Signatur

HTMLMediaElement.duration

Beschreibung

Die Eigenschaft duration eines <audio>- oder <video>-Elements gibt die Länge des Mediums in Sekunden zurück. Der Wert ist eine Gleitkommazahl vom Typ double, zum Beispiel 127.453. Man braucht ihn für eigene Wiedergabesteuerungen: Fortschrittsbalken, Zeitanzeigen („1:23 / 4:56“) oder das Umrechnen einer Klickposition in eine Abspielposition für currentTime.

Wie verlässlich der Wert ist, hängt vom Ladezustand ab. Solange keine Metadaten vorliegen (readyState ist HAVE_NOTHING), ist duration gleich NaN. Sobald das Ereignis loadedmetadata ausgelöst wurde, steht der Wert zur Verfügung. Ändert sich die Dauer später, etwa weil der Browser die Länge beim Laden genauer bestimmt, wird das Ereignis durationchange gefeuert.

Bei Livestreams und anderen Medien ohne festes Ende ist der Wert Infinity. Die Eigenschaft kann nicht beschrieben werden. Wenn eine Quelle per Media Source Extensions eingespeist wird, legt man die Dauer stattdessen über MediaSource.duration fest.

Rückgabewert

Typ

number

Beschreibung

Die Länge in Sekunden als Gleitkommazahl. Solange keine Metadaten geladen sind, ist der Wert NaN, bei Livestreams ohne definiertes Ende Infinity.

Beispiele

Dauer nach dem Laden der Metadaten auslesen

const video = document.querySelector('video');

// Vor loadedmetadata wäre duration noch NaN
console.log('Vorher:', video.duration);

video.addEventListener('loadedmetadata', () => {
  console.log(`Länge: ${video.duration.toFixed(2)} Sekunden`);
});

Vorher: NaN Länge: 212.48 Sekunden

Zeitanzeige im Format mm:ss (auch für Livestreams)

const formatTime = (seconds) => {
  if (Number.isNaN(seconds)) return '--:--';
  if (!Number.isFinite(seconds)) return 'LIVE';
  const m = Math.floor(seconds / 60);
  const s = Math.floor(seconds % 60).toString().padStart(2, '0');
  return `${m}:${s}`;
};

const audio = document.querySelector('audio');
const label = document.querySelector('#time');

const update = () => {
  label.textContent = `${formatTime(audio.currentTime)} / ${formatTime(audio.duration)}`;
};

audio.addEventListener('timeupdate', update);
audio.addEventListener('durationchange', update);

z. B. "1:05 / 3:32" oder "0:12 / LIVE"

Fortschrittsbalken mit Sprung per Klick

const video = document.querySelector('video');
const bar = document.querySelector('.progress');
const fill = bar.querySelector('.progress-fill');

video.addEventListener('timeupdate', () => {
  if (!Number.isFinite(video.duration)) return;
  const percent = (video.currentTime / video.duration) * 100;
  fill.style.width = `${percent}%`;
});

bar.addEventListener('click', (event) => {
  if (!Number.isFinite(video.duration)) return;
  const rect = bar.getBoundingClientRect();
  const ratio = (event.clientX - rect.left) / rect.width;
  video.currentTime = ratio * video.duration;
});

Dauer einer Audiodatei ermitteln, ohne sie abzuspielen

const getAudioDuration = (url) => new Promise((resolve, reject) => {
  const audio = new Audio();
  audio.preload = 'metadata';
  audio.addEventListener('loadedmetadata', () => resolve(audio.duration), { once: true });
  audio.addEventListener('error', () => reject(audio.error), { once: true });
  audio.src = url;
});

const seconds = await getAudioDuration('/media/podcast-folge-12.mp3');
console.log(`Folge dauert ${Math.round(seconds / 60)} Minuten`);

Folge dauert 47 Minuten

// Wichtig · Fallstricke

NaN vor dem Laden: Wer duration direkt nach dem Setzen von src ausliest, bekommt NaN. Rechnungen wie currentTime / duration ergeben dann ebenfalls NaN. Den Wert deshalb erst in loadedmetadata bzw. durationchange auslesen oder readyState >= 1 prüfen.
Infinity bei Streams: Bei Livestreams (z. B. HLS-Live oder Internetradio) ist der Wert Infinity. Mit Number.isFinite() absichern, bevor man Prozentwerte berechnet oder currentTime setzt.
WebM/MediaRecorder: Mit MediaRecorder erzeugte WebM-Dateien enthalten oft keine Längenangabe. Chrome meldet dann anfangs Infinity. Ein bekannter Umweg: currentTime auf einen sehr hohen Wert setzen und auf durationchange warten.
Ungenauigkeit: Bei MP3-Dateien mit variabler Bitrate schätzt der Browser die Dauer anfangs nur und korrigiert sie beim weiteren Laden. Deshalb auf durationchange reagieren, statt den Wert einmalig zu speichern.
Schreibgeschützt: Eine Zuweisung wie video.duration = 10 wird ohne Fehlermeldung ignoriert. Im Strict Mode wirft sie einen TypeError, weil nur ein Getter existiert.
Kompatibilität: Wird von allen modernen Browsern seit vielen Jahren unterstützt. Unterschiede gibt es nur bei Randfällen wie Streams und Containern ohne Längenangabe.

Siehe auch

HTMLMediaElement.error HTMLMediaElement.loading HTMLMediaElement.muted HTMLMediaElement.autoplay HTMLMediaElement.buffered