Signatur
Beschreibung
Die Eigenschaft language eines AudioTrack-Objekts gibt die Hauptsprache der Audiospur als gültiges BCP-47-Sprachtag zurück, etwa "en", "de-DE" oder "pt-BR". Der Wert stammt aus den Metadaten der Mediendatei bzw. des Streams (z. B. MP4-, WebM- oder HLS-Manifest). Enthält die Quelle keine Sprachangabe oder kann der Browser sie nicht ermitteln, ist der Wert eine leere Zeichenkette "".
Typischer Einsatzzweck ist ein eigenes Sprachauswahl-Menü für Videos mit mehreren Tonspuren (z. B. Originalton und Synchronfassung). Über HTMLMediaElement.audioTracks erhält man eine AudioTrackList, deren Einträge man anhand von language filtert und dann über AudioTrack.enabled aktiviert oder deaktiviert.
Da die Eigenschaft schreibgeschützt ist, lässt sich die Sprache einer Spur per JavaScript nicht ändern. Für eine lesbare Anzeige im Menü kombiniert man sie sinnvollerweise mit AudioTrack.label oder übersetzt den Code mit Intl.DisplayNames.
Rückgabewert
"en" oder "de-AT", oder "", wenn die Sprache unbekannt ist.Beispiele
Sprachen aller Audiospuren auflisten
const video = document.querySelector('video');
video.addEventListener('loadedmetadata', () => {
const tracks = video.audioTracks;
if (!tracks) {
console.warn('AudioTrack-API wird nicht unterstützt');
return;
}
for (const track of tracks) {
console.log(`${track.id}: ${track.language || '(unbekannt)'} – ${track.label}`);
}
});Tonspur passend zur Browsersprache aktivieren
const video = document.querySelector('video');
const selectAudioByLanguage = (media, preferred = navigator.language) => {
const tracks = Array.from(media.audioTracks ?? []);
const base = preferred.split('-')[0].toLowerCase();
// Erst exakte Übereinstimmung, dann nur die Hauptsprache
const match =
tracks.find((t) => t.language.toLowerCase() === preferred.toLowerCase()) ??
tracks.find((t) => t.language.split('-')[0].toLowerCase() === base);
if (!match) return null;
tracks.forEach((t) => { t.enabled = t === match; });
return match.language;
};
video.addEventListener('loadedmetadata', () => {
console.log('Aktive Sprache:', selectAudioByLanguage(video, 'de-DE'));
});Sprachauswahl-Menü mit lesbaren Namen via Intl.DisplayNames
const video = document.querySelector('video');
const select = document.querySelector('#audio-lang');
const names = new Intl.DisplayNames(['de'], { type: 'language' });
video.addEventListener('loadedmetadata', () => {
for (const track of video.audioTracks ?? []) {
const option = document.createElement('option');
option.value = track.id;
option.textContent = track.language
? names.of(track.language)
: track.label || 'Unbekannte Sprache';
option.selected = track.enabled;
select.append(option);
}
});
select.addEventListener('change', () => {
for (const track of video.audioTracks) {
track.enabled = track.id === select.value;
}
});// Wichtig · Fallstricke
- Browser-Kompatibilität: Die
AudioTrack-API ist nur in Safari standardmäßig aktiv. In Chrome/Edge ist sie hinter dem Flag „Experimental Web Platform features“ versteckt, in Firefox hintermedia.track.enabled. Immer vorher prüfen, obvideo.audioTracksexistiert. Für die Produktion eignen sich oft Player-Bibliotheken wie hls.js, Shaka Player oder dash.js mit eigener Spurverwaltung besser. - Der Wert kann eine leere Zeichenkette sein – nie davon ausgehen, dass jede Spur eine Sprache hat.
- Sprachtags unterscheiden in der Praxis Groß-/Kleinschreibung uneinheitlich (
"en-us"vs."en-US"), und manche Container liefern ISO-639-2-Codes wie"deu"oder"und"(unbestimmt). Deshalb vor dem Vergleich normalisieren. - Die Audiospuren stehen erst nach dem Laden der Metadaten zur Verfügung – daher im Event
loadedmetadataoder imaddtrack-Event derAudioTrackListauswerten. - Die Eigenschaft ist schreibgeschützt; Zuweisungen werden stillschweigend ignoriert (im Strict Mode gibt es einen
TypeError).