AudioTrackList: removetrack — Ereignis · JavaScript-Referenz

Signatur

audioTrackList.addEventListener("removetrack", handler)

Beschreibung

Das Ereignis removetrack wird an der AudioTrackList eines <audio>- oder <video>-Elements (erreichbar über HTMLMediaElement.audioTracks) ausgelöst, wenn eine Audiospur aus der Liste verschwindet. Das passiert z. B., wenn eine neue Quelle geladen wird (src ändert sich, load() wird aufgerufen) oder wenn bei Media Source Extensions ein SourceBuffer entfernt wird.

Das Ereignisobjekt ist ein TrackEvent. Seine Eigenschaft track verweist auf das entfernte AudioTrack-Objekt, sodass du dessen id, label, language oder kind noch auslesen kannst. Das Ereignis ist nicht abbrechbar und steigt nicht auf (kein Bubbling).

Typische Anwendungsfälle sind eigene Sprachauswahl-Menüs in Mediaplayern: Wird eine Spur entfernt, muss der passende Menüeintrag verschwinden. Registrieren kannst du den Handler per addEventListener("removetrack", …) oder über die Eigenschaft onremovetrack.

Parameter

Name	Typ	Default	Beschreibung
$type Pflicht	string		Der Ereignisname `"removetrack"`.
$handler Pflicht	(event: TrackEvent) => void		Callback, der ein `TrackEvent` erhält; `event.track` ist das entfernte `AudioTrack`.
$options	boolean \| AddEventListenerOptions	false	Optionen wie `once`, `signal` oder `capture`.

Rückgabewert

Typ

void

Beschreibung

addEventListener gibt nichts zurück. Der Handler erhält ein TrackEvent.

Beispiele

Entfernte Spur per addEventListener protokollieren

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

if (video.audioTracks) {
  video.audioTracks.addEventListener('removetrack', (event) => {
    const { id, label, language } = event.track;
    console.log(`Audiospur entfernt: ${label || id} (${language})`);
    console.log(`Verbleibende Spuren: ${video.audioTracks.length}`);
  });
} else {
  console.warn('AudioTrackList wird von diesem Browser nicht unterstützt.');
}

Audiospur entfernt: Deutsch (de) Verbleibende Spuren: 1

Sprachmenü synchron halten mit onremovetrack

const video = document.querySelector('#player');
const menu = document.querySelector('#audio-sprachen');

const tracks = video.audioTracks;
if (tracks) {
  tracks.onaddtrack = ({ track }) => {
    const option = new Option(track.label || track.language, track.id);
    menu.add(option);
  };

  tracks.onremovetrack = ({ track }) => {
    const option = [...menu.options].find((o) => o.value === track.id);
    option?.remove();
  };
}

Listener mit AbortController wieder entfernen

const video = document.querySelector('video');
const controller = new AbortController();

const onRemove = (event) => {
  console.log('Entfernt:', event.track.id);
};

video.audioTracks?.addEventListener('removetrack', onRemove, {
  signal: controller.signal,
});

// Später, z. B. beim Zerstören der Player-Komponente:
controller.abort();
// Alternativ: video.audioTracks.removeEventListener('removetrack', onRemove);
// oder: video.audioTracks.onremovetrack = null;

// Wichtig · Fallstricke

Browser-Kompatibilität: HTMLMediaElement.audioTracks ist nur in Safari standardmäßig aktiv. In Chrome/Edge ist es hinter dem Flag „Experimental Web Platform features“, in Firefox hinter media.track.enabled verborgen. Immer per if (video.audioTracks) bzw. optionaler Verkettung prüfen.
Das Ereignis bubbelt nicht – ein Listener am <video>-Element selbst fängt es nicht ab; er muss an video.audioTracks hängen.
Beim Wechsel der Quelle werden meist alle Spuren nacheinander entfernt; für jede feuert ein eigenes Ereignis. Aufwändige UI-Neuberechnungen ggf. bündeln (z. B. per queueMicrotask oder requestAnimationFrame).
Zum Zeitpunkt des Ereignisses ist die Spur bereits nicht mehr in der Liste; getTrackById(event.track.id) liefert null.

Siehe auch

AudioTrackList AudioTrackList: addtrack AudioTrackList: change TrackEvent AudioTrack HTMLMediaElement.audioTracks VideoTrackList: removetrack