Signatur
Beschreibung
Die Eigenschaft id eines AudioTrack-Objekts gibt die Kennung der Audiospur zurück. Diese Kennung kommt aus der Mediendatei selbst, z. B. aus der Track-ID eines MP4-Containers oder aus einem HLS- bzw. DASH-Manifest. Innerhalb der AudioTrackList eines <audio>- oder <video>-Elements ist sie eindeutig.
Mit der ID findest du eine bestimmte Spur gezielt wieder, zum Beispiel über AudioTrackList.getTrackById(). So kannst du eine Nutzerauswahl (etwa „Regiekommentar“ oder „Englisch“) speichern und später wiederherstellen. Anders als der Index in der Liste bleibt die ID gleich, auch wenn sich die Reihenfolge der Spuren ändert.
Unterstützt das Medienformat Media Fragments URI, kannst du die ID auch im Fragment der URL angeben (#track=ID), um eine bestimmte Spur direkt anzusprechen.
Die Eigenschaft ist schreibgeschützt. Hat die Mediendatei keine Kennung für die Spur, ist der Wert ein leerer String ("").
Rückgabewert
Beispiele
Alle Audiospuren mit ID auflisten
const video = document.querySelector('video');
video.addEventListener('loadedmetadata', () => {
if (!video.audioTracks) {
console.warn('AudioTrackList wird von diesem Browser nicht unterstützt.');
return;
}
for (const track of video.audioTracks) {
console.log(`ID: "${track.id}", Sprache: ${track.language}, aktiv: ${track.enabled}`);
}
});Gespeicherte Spurauswahl über die ID wiederherstellen
const video = document.querySelector('video');
// Auswahl merken
const merkeSpur = (track) => {
localStorage.setItem('bevorzugteAudioSpur', track.id);
};
// Auswahl wiederherstellen
video.addEventListener('loadedmetadata', () => {
const tracks = video.audioTracks;
const gespeicherteId = localStorage.getItem('bevorzugteAudioSpur');
if (!tracks || !gespeicherteId) return;
const ziel = tracks.getTrackById(gespeicherteId);
if (ziel) {
for (const t of tracks) t.enabled = (t === ziel);
console.log(`Audiospur "${ziel.label || ziel.id}" aktiviert.`);
}
});Auswahlmenü für Audiospuren aufbauen
const video = document.querySelector('video');
const select = document.querySelector('#audio-auswahl');
video.addEventListener('loadedmetadata', () => {
const tracks = video.audioTracks;
if (!tracks) return;
for (const track of tracks) {
const option = new Option(track.label || track.language || `Spur ${track.id}`, track.id);
option.selected = track.enabled;
select.append(option);
}
select.addEventListener('change', () => {
for (const t of tracks) t.enabled = (t.id === select.value);
});
});// Wichtig · Fallstricke
- Browser-Unterstützung:
AudioTrackundHTMLMediaElement.audioTracksfunktionieren ohne Umwege nur in Safari. In Chrome/Edge musst du dafür „Experimental Web Platform features“ aktivieren, in Firefox die Einstellungmedia.track.enabled. Prüfe deshalb immer zuerst, ob die API vorhanden ist, etwa mitif (video.audioTracks). - Die ID kann leer sein: Enthält die Mediendatei keine Kennungen, ist
idein leerer String. Speichere dann keine leere ID; nimm als Ersatz z. B.languageoderlabel. - Nicht mit HTML-
idverwechseln: Die Eigenschaft hat nichts mit demid-Attribut von DOM-Elementen zu tun. Sie ist nur innerhalb derAudioTrackListeines einzelnen Medienelements eindeutig, nicht im ganzen Dokument. - Schreibgeschützt: Wenn du etwas zuweist, passiert nichts. Im Strict Mode kommt ein
TypeErrorhinzu. - Zeitpunkt: Die Spuren stehen erst ab dem Ereignis
loadedmetadatazuverlässig zur Verfügung. Bei Streams (HLS/DASH) können sie sich später noch ändern; beobachte dafür die EreignisseaddtrackundremovetrackderAudioTrackList.