Signatur
Beschreibung
Die schreibgeschützte Eigenschaft kind eines AudioTrack-Objekts gibt an, welche Art von Audio die Spur enthält. Mit dem Wert entscheiden Sie, welche Tonspur eines <video>- oder <audio>-Elements aktiviert werden soll. Das ist zum Beispiel wichtig, wenn Sie eine Audiodeskription für blinde Nutzer, einen Regiekommentar oder eine Synchronfassung anbieten.
Mögliche Werte laut HTML-Spezifikation:
"alternative": eine Alternative zur Hauptspur, etwa eine andere Abmischung oder ein anderer Schnitt."descriptions": eine Audiodeskription, die das Bild für sehbehinderte Menschen beschreibt."main": die Haupttonspur."main-desc": die Hauptspur, in die eine Audiodeskription schon eingemischt ist."translation": eine übersetzte Fassung der Hauptspur, also eine Synchronisation."commentary": ein Kommentar, zum Beispiel vom Regisseur.""(leerer String): Die Art ist unbekannt oder wird vom Browser nicht unterstützt.
Der Wert stammt aus den Metadaten der Mediendatei oder des Streams (zum Beispiel aus dem Rollen-Attribut in einem HLS- oder DASH-Manifest). Er lässt sich per Skript nicht ändern. Zum Umschalten der Spur dient die Eigenschaft AudioTrack.enabled.
Rückgabewert
"alternative", "descriptions", "main", "main-desc", "translation", "commentary" oder "".Beispiele
Alle Audiospuren eines Videos auflisten
const video = document.querySelector('video');
video.addEventListener('loadedmetadata', () => {
if (!('audioTracks' in video)) {
console.warn('AudioTrackList wird nicht unterstützt');
return;
}
for (const track of video.audioTracks) {
console.log(`${track.id}: kind="${track.kind}", Sprache=${track.language}, aktiv=${track.enabled}`);
}
});
Audiodeskription für Barrierefreiheit aktivieren
const enableAudioDescription = (media) => {
const tracks = Array.from(media.audioTracks ?? []);
// Zuerst eine eingemischte Deskription suchen, sonst eine separate Spur
const desc = tracks.find((t) => t.kind === 'main-desc')
?? tracks.find((t) => t.kind === 'descriptions');
if (!desc) return false;
// Es sollte nur eine Spur hörbar sein: alle anderen abschalten
tracks.forEach((t) => { t.enabled = t === desc; });
return true;
};
const video = document.querySelector('#film');
video.addEventListener('loadedmetadata', () => {
console.log('Audiodeskription aktiv:', enableAudioDescription(video));
});
Auswahlmenü mit lesbaren Bezeichnungen erzeugen
const labels = {
main: 'Original',
'main-desc': 'Original mit Audiodeskription',
descriptions: 'Audiodeskription',
translation: 'Synchronfassung',
commentary: 'Kommentar',
alternative: 'Alternative Tonspur',
'': 'Unbekannt'
};
const video = document.querySelector('video');
const select = document.querySelector('#audio-select');
video.addEventListener('loadedmetadata', () => {
[...video.audioTracks].forEach((track, i) => {
const opt = new Option(`${labels[track.kind]} (${track.language || '?'})`, i);
opt.selected = track.enabled;
select.add(opt);
});
});
select.addEventListener('change', () => {
[...video.audioTracks].forEach((t, i) => { t.enabled = i === Number(select.value); });
});
// Wichtig · Fallstricke
Browser-Unterstützung: AudioTrack und HTMLMediaElement.audioTracks werden nur in Safari (macOS/iOS) standardmäßig unterstützt. In Chrome/Edge müssen Sie das Flag „Experimental Web Platform features“ aktivieren, in Firefox die Einstellung media.track.enabled. Prüfen Sie daher immer vorher mit 'audioTracks' in video, ob die Schnittstelle vorhanden ist.
- Die Eigenschaft ist schreibgeschützt. Eine Zuweisung wird stillschweigend ignoriert und löst im Strict Mode einen
TypeErroraus. - Viele Mediendateien enthalten keine Angabe zur Art der Spur. Dann ist
kindein leerer String, oder der Browser setzt pauschal"main". Verlassen Sie sich deshalb nicht allein auf diesen Wert, sondern ziehen Sie auchlanguageundlabelheran. - Die Spuren sind erst verfügbar, wenn die Metadaten geladen sind (
loadedmetadata). Bei adaptiven Streams (HLS/DASH über MSE) können auch später noch Spuren hinzukommen. Beobachten Sie dafür das EreignisaddtrackderAudioTrackList. - Nicht verwechseln mit
TextTrack.kind: Dort sind die Werte andere (subtitles,captionsusw.).