Signatur
Beschreibung
Die Eigenschaft title gehört zur Schnittstelle ChapterInformation der Media Session API. Ein ChapterInformation-Objekt beschreibt ein einzelnes Kapitel in einer Audio- oder Videodatei, z. B. einen Abschnitt in einem Podcast, einem Hörbuch oder einem Lernvideo. title enthält den lesbaren Namen dieses Kapitels.
Man erzeugt ChapterInformation-Objekte nicht direkt. Stattdessen übergibt man beim Erstellen von new MediaMetadata() ein Array chapterInfo mit einfachen Objekten ({ title, startTime, artwork }). Der Browser wandelt diese in ChapterInformation-Instanzen um. Über navigator.mediaSession.metadata.chapterInfo kann man sie wieder auslesen.
Der Browser kann die Kapiteltitel in seiner Medienwiedergabe-Oberfläche anzeigen, etwa in der globalen Mediensteuerung, auf dem Sperrbildschirm oder in Benachrichtigungen. Für die eigene Oberfläche der Website eignet sich title gut, um eine Kapitelliste anzuzeigen oder beim Abspielen das aktuelle Kapitel hervorzuheben.
Die Eigenschaft ist schreibgeschützt. Wer einen Titel ändern will, muss navigator.mediaSession.metadata ein neues MediaMetadata-Objekt mit angepasstem chapterInfo zuweisen.
Rückgabewert
title angegeben, ist der Wert ein leerer String "".Beispiele
Kapitel festlegen und Titel auslesen
if ('mediaSession' in navigator) {
navigator.mediaSession.metadata = new MediaMetadata({
title: 'Folge 42: Web-APIs im Alltag',
artist: 'programmierung.net Podcast',
chapterInfo: [
{ title: 'Intro', startTime: 0 },
{ title: 'Media Session API', startTime: 95 },
{ title: 'Fazit', startTime: 1720 }
]
});
const chapters = navigator.mediaSession.metadata.chapterInfo ?? [];
chapters.forEach((chapter) => console.log(chapter.title));
}Aktuelles Kapitel beim Abspielen anzeigen
const audio = document.querySelector('audio');
const label = document.querySelector('#aktuelles-kapitel');
const findChapter = (time) => {
const chapters = navigator.mediaSession.metadata?.chapterInfo ?? [];
// Letztes Kapitel, dessen Startzeit bereits erreicht ist
return chapters.findLast((ch) => ch.startTime <= time);
};
audio.addEventListener('timeupdate', () => {
const chapter = findChapter(audio.currentTime);
label.textContent = chapter ? chapter.title : '';
});Kapitelliste als Navigation rendern
const list = document.querySelector('#kapitel');
const video = document.querySelector('video');
for (const { title, startTime } of navigator.mediaSession.metadata?.chapterInfo ?? []) {
const button = document.createElement('button');
button.textContent = title || 'Ohne Titel'; // leerer String abfangen
button.addEventListener('click', () => {
video.currentTime = startTime;
});
const li = document.createElement('li');
li.append(button);
list.append(li);
}Schreibschutz beachten
const [first] = navigator.mediaSession.metadata.chapterInfo;
first.title = 'Neuer Titel'; // wird ignoriert (im Strict Mode: TypeError)
console.log(first.title);
// Richtig: Metadaten neu zuweisen
const old = navigator.mediaSession.metadata;
navigator.mediaSession.metadata = new MediaMetadata({
title: old.title,
artist: old.artist,
chapterInfo: old.chapterInfo.map((ch, i) => ({
title: i === 0 ? 'Begrüßung' : ch.title,
startTime: ch.startTime,
artwork: [...ch.artwork]
}))
});
console.log(navigator.mediaSession.metadata.chapterInfo[0].title);// Wichtig · Fallstricke
- Experimentell:
ChapterInformationundMediaMetadata.chapterInfowerden bisher nur von Chromium-basierten Browsern unterstützt. In Firefox und Safari istchapterInfoundefined. Deshalb immer mit?.und?? []absichern und eine Funktionserkennung wie'chapterInfo' in MediaMetadata.prototypenutzen. - Schreibgeschützt: Eine Zuweisung an
titlewird im normalen Modus stillschweigend ignoriert und löst im Strict Mode (also auch in ES-Modulen) einenTypeErroraus. Das ArraychapterInfoist außerdem eingefroren. - Kein Konstruktor:
new ChapterInformation()gibt es nicht. Instanzen entstehen nur übernew MediaMetadata({ chapterInfo }). - Ohne angegebenen Titel ist der Wert ein leerer String und nicht
undefined. Einen Ersatztext musst du selbst vorsehen. - Ob und wie der Browser die Kapiteltitel in der System-Mediensteuerung anzeigt, hängt vom Browser und vom Betriebssystem ab. Verlass dich also nicht darauf, dass sie dort sichtbar sind.
- Kommen Titel aus Nutzereingaben oder von fremden APIs, füge sie mit
textContentstattinnerHTMLins DOM ein, um XSS zu vermeiden.