Signatur
Beschreibung
Die schreibgeschützte Eigenschaft length einer AudioTrackList gibt an, wie viele Audiospuren (AudioTrack) das zugehörige <audio>- oder <video>-Element enthält. Die Liste bekommt man über HTMLMediaElement.audioTracks.
Man braucht length vor allem, um mit einer klassischen for-Schleife über die Spuren zu gehen (die Liste ist kein echtes Array), um zu prüfen, ob es überhaupt mehrere Sprachfassungen, Audiodeskriptionen oder Kommentarspuren gibt, und um danach etwa ein Menü zur Sprachauswahl ein- oder auszublenden.
Der Wert kann sich ändern: Solange die Metadaten des Mediums noch nicht geladen sind, ist er meist 0. Kommen Spuren dazu oder fallen welche weg, löst die Liste die Ereignisse addtrack bzw. removetrack aus. Wer auf die aktuelle Anzahl angewiesen ist, sollte sie deshalb erst nach loadedmetadata oder in diesen Ereignissen abfragen.
Rückgabewert
0, wenn es keine Spuren gibt oder die Metadaten noch nicht geladen sind.Beispiele
Anzahl der Audiospuren nach dem Laden der Metadaten
const video = document.querySelector('video');
video.addEventListener('loadedmetadata', () => {
// Unterstützung prüfen, weil audioTracks nicht überall verfügbar ist
if (!video.audioTracks) {
console.log('AudioTrackList wird nicht unterstützt');
return;
}
console.log(`Audiospuren: ${video.audioTracks.length}`);
});Sprachauswahl nur bei mehreren Spuren anzeigen
const video = document.querySelector('#film');
const select = document.querySelector('#sprache');
video.addEventListener('loadedmetadata', () => {
const tracks = video.audioTracks;
if (!tracks || tracks.length < 2) {
select.hidden = true;
return;
}
for (let i = 0; i < tracks.length; i++) {
const track = tracks[i];
const option = new Option(track.label || track.language || `Spur ${i + 1}`, track.id);
option.selected = track.enabled;
select.append(option);
}
select.hidden = false;
});
select.addEventListener('change', () => {
const tracks = video.audioTracks;
for (let i = 0; i < tracks.length; i++) {
tracks[i].enabled = tracks[i].id === select.value;
}
});Änderungen der Spuranzahl verfolgen
const audio = document.querySelector('audio');
const tracks = audio.audioTracks;
const logCount = (event) => {
console.log(`${event.type}: jetzt ${tracks.length} Spur(en)`);
};
tracks.addEventListener('addtrack', logCount);
tracks.addEventListener('removetrack', logCount);// Wichtig · Fallstricke
- Browser-Unterstützung:
audioTracksund damitAudioTrackList.lengthgibt es von Haus aus nur in Safari. In Chrome/Edge muss man „Experimental Web Platform features“ einschalten, in Firefox die Einstellungmedia.track.enabled. Prüfe deshalb immer zuerst mitif (media.audioTracks), ob die Liste existiert. - Schreibgeschützt: Eine Zuweisung wie
tracks.length = 0bewirkt nichts (im Strict Mode gibt es einenTypeError). Spuren lassen sich auf diesem Weg weder entfernen noch hinzufügen. - Zeitpunkt: Vor
loadedmetadataist der Wert meist0, auch wenn die Datei mehrere Spuren hat. - Kein Array:
AudioTrackListhat keinmapund keinforEach. Nimm eine Indexschleife mitlengthoder vorherArray.from(tracks). - Viele Container (z. B. einfache MP3-Dateien) haben genau eine Spur. Mehrere Spuren kommen meist bei MP4/HLS-Streams mit mehreren Sprachfassungen vor.