Signatur
Beschreibung
Die Eigenschaft label eines AudioTrack-Objekts enthält den Namen, den die Medienquelle der Audiospur gegeben hat, zum Beispiel „English“, „Deutsch (5.1)“ oder „Audiodeskription“. Der Wert stammt aus den Metadaten des Containers (etwa MP4, WebM oder einem HLS-Manifest). Fehlt eine solche Angabe, ist label ein leerer String "".
Man braucht label vor allem für eigene Player-Oberflächen. Die Spuren eines <video>- oder <audio>-Elements erreicht man über HTMLMediaElement.audioTracks. Aus diesen Spuren lässt sich ein Auswahlmenü bauen, in dem Nutzer zwischen Sprachen oder Kommentarspuren wechseln. Umgeschaltet wird über AudioTrack.enabled.
Die Eigenschaft ist schreibgeschützt. Eine Zuweisung hat keine Wirkung und wirft im Strict Mode einen TypeError. Das Label ist außerdem nicht an die Oberflächensprache des Browsers angepasst: Es erscheint genau so, wie es in der Medienquelle steht. Deshalb sollte man eine Ersatzanzeige einplanen, etwa aus AudioTrack.language oder der Position der Spur.
Rückgabewert
"", wenn die Medienquelle keine Bezeichnung liefert.Beispiele
Alle Audiospuren mit Bezeichnung auflisten
const video = document.querySelector('video');
video.addEventListener('loadedmetadata', () => {
if (!video.audioTracks) {
console.warn('AudioTrackList wird nicht unterstützt');
return;
}
for (const track of video.audioTracks) {
console.log(`${track.id}: ${track.label || '(ohne Bezeichnung)'} [${track.language}]`);
}
});Auswahlmenü für die Tonspur bauen
const video = document.querySelector('#film');
const select = document.querySelector('#tonspur');
const buildMenu = () => {
select.replaceChildren();
[...video.audioTracks].forEach((track, index) => {
const option = document.createElement('option');
option.value = String(index);
// Ersatztext, wenn weder label noch language gesetzt sind
option.textContent = track.label || track.language || `Spur ${index + 1}`;
option.selected = track.enabled;
select.append(option);
});
};
select.addEventListener('change', () => {
const chosen = Number(select.value);
[...video.audioTracks].forEach((track, i) => {
track.enabled = i === chosen;
});
});
video.audioTracks?.addEventListener('addtrack', buildMenu);
video.audioTracks?.addEventListener('removetrack', buildMenu);Kommentarspur anhand des Labels finden
const findCommentaryTrack = (media) => {
const tracks = [...(media.audioTracks ?? [])];
return tracks.find(
(t) => t.kind === 'commentary' || /kommentar|commentary/i.test(t.label)
) ?? null;
};
const video = document.querySelector('video');
video.addEventListener('loadedmetadata', () => {
const commentary = findCommentaryTrack(video);
console.log(commentary ? `Gefunden: ${commentary.label}` : 'Keine Kommentarspur');
});// Wichtig · Fallstricke
- Browser-Unterstützung:
audioTracksundAudioTracksind nur in Safari standardmäßig aktiv. In Chrome/Edge (chrome://flags, „Experimental Web Platform features“) und Firefox (media.track.enabled) muss man ein Flag setzen. Deshalb vorher mitif (video.audioTracks)prüfen oder optionale Verkettung (?.) nutzen. - Leerer String: Viele Dateien enthalten kein Label. Rechnen Sie also mit
""und zeigen Sie in dem Fall eine Ersatzbezeichnung an. - Zeitpunkt: Die Spuren und ihre Labels stehen oft erst ab
loadedmetadataoder nach demaddtrack-Ereignis derAudioTrackListfest. - Sicherheit: Das Label kommt aus der Mediendatei, also potenziell von Dritten. Geben Sie es per
textContentaus, nicht perinnerHTML, damit keine XSS-Lücke entsteht. - Bei Media Source Extensions (MSE) hängt das Label davon ab, wie die Segmente verpackt sind, und kann je nach Browser fehlen.