Signatur
Beschreibung
Die Eigenschaft audioTracks liefert ein AudioTrackList-Objekt. Es enthält für jede Tonspur der geladenen Mediendatei ein AudioTrack-Objekt. Das ist z. B. nützlich bei Videos mit mehreren Sprachfassungen, Audiodeskription für Sehbehinderte oder Regiekommentar. Jede Spur hat die Eigenschaften id, kind (z. B. "main", "alternative", "description", "commentary"), label, language und enabled.
Die Liste selbst kann man nicht überschreiben, sie wird aber live aktualisiert: Kommen beim Laden der Metadaten Spuren hinzu oder fallen weg, löst die Liste die Ereignisse addtrack bzw. removetrack aus. Wenn sich der Wert von enabled bei einer Spur ändert, folgt das Ereignis change. Auf die Spuren greift man über einen Index (audioTracks[0]), über length oder über getTrackById(id) zu.
Anders als bei Videospuren (videoTracks) dürfen mehrere Tonspuren gleichzeitig aktiv sein. Der Browser mischt sie dann. Soll der Nutzer die Sprache wechseln, setzt man deshalb die gewünschte Spur auf enabled = true und alle anderen ausdrücklich auf false.
Rückgabewert
AudioTrack-Objekten. Wenn die Datei keine Tonspur hat oder die Metadaten noch nicht geladen sind, ist sie leer (length === 0).Beispiele
Alle Tonspuren nach dem Laden der Metadaten auflisten
const video = document.querySelector('video');
video.addEventListener('loadedmetadata', () => {
if (!('audioTracks' in video)) {
console.warn('audioTracks wird von diesem Browser nicht unterstützt');
return;
}
for (const track of video.audioTracks) {
console.log(`${track.id}: ${track.label} (${track.language}, ${track.kind}) aktiv=${track.enabled}`);
}
});Sprachwahl: genau eine Tonspur aktivieren
const video = document.querySelector('video');
const setAudioLanguage = (lang) => {
const tracks = video.audioTracks;
if (!tracks) return false;
let found = false;
for (let i = 0; i < tracks.length; i++) {
const match = !found && tracks[i].language === lang;
tracks[i].enabled = match; // andere Spuren ausdrücklich abschalten
if (match) found = true;
}
return found;
};
console.log(setAudioLanguage('en'));Auswahlmenü aufbauen und auf Änderungen reagieren
const video = document.querySelector('video');
const select = document.querySelector('#audio-select');
const tracks = video.audioTracks;
const render = () => {
select.replaceChildren(...Array.from(tracks, (t) => {
const opt = new Option(t.label || t.language || t.id, t.id);
opt.selected = t.enabled;
return opt;
}));
};
if (tracks) {
tracks.addEventListener('addtrack', render);
tracks.addEventListener('removetrack', render);
tracks.onchange = () => console.log('Aktive Tonspur geändert');
select.addEventListener('change', () => {
for (const t of tracks) t.enabled = t.id === select.value;
});
}// Wichtig · Fallstricke
- Kompatibilität: Standardmäßig wird die Eigenschaft nur von Safari (macOS/iOS) unterstützt. In Chrome/Edge muss man das Flag „Experimental Web Platform features“ einschalten, in Firefox die Einstellung
media.track.enabled. Sonst istaudioTracksundefined. Deshalb immer mit'audioTracks' in videoprüfen. - Vor
loadedmetadataist die Liste meist leer. Frühestens dann auslesen oder aufaddtrackhören. - Es können mehrere Spuren gleichzeitig aktiv sein. Wenn man nur eine Spur einschaltet, laufen die anderen weiter und man hört sie gemischt.
- Bei adaptivem Streaming (HLS/DASH über Media Source Extensions) liefern Player-Bibliotheken wie hls.js oder dash.js oft eigene Schnittstellen zur Wahl der Tonspur.
audioTracksspiegelt diese Spuren nicht unbedingt wider. - Was in
labelundlanguagesteht, hängt vom Container-Format ab. Die Werte können leere Strings sein.