Signatur
Beschreibung
Die Eigenschaft title gehört zur Schnittstelle MediaMetadata der Media Session API. Sie enthält den Titel des aktuellen Mediums, etwa den Songtitel, den Namen einer Podcast-Folge oder den Videotitel. Der Browser zeigt ihn außerhalb der Seite an: in der systemweiten Mediensteuerung, auf dem Sperrbildschirm von Mobilgeräten, im Media-Hub von Chrome, auf Smartwatches oder in Bluetooth-Geräten im Auto.
Den Wert legst du meist direkt im Konstruktor fest (new MediaMetadata({ title: '…' })) und weist das Objekt dann navigator.mediaSession.metadata zu. Weil die Eigenschaft beschreibbar ist, kannst du den Titel später ändern, zum Beispiel beim Wechsel zum nächsten Titel einer Playlist oder bei einem Livestream, dessen Sendung wechselt. Die Anzeige wird dann ohne neues Objekt aktualisiert.
Jeder zugewiesene Wert wird in einen string umgewandelt. Wird im Konstruktor kein Titel angegeben, ist der Wert ein leerer String "". In diesem Fall zeigen viele Browser ersatzweise den Dokumenttitel oder den Dateinamen an.
Parameter
| Name | Typ | Default | Beschreibung |
|---|---|---|---|
| $value | string | "" | Beim Setzen: der neue Titel des Mediums. Werte, die keine Strings sind, werden mit String() umgewandelt. |
Rückgabewert
"".Beispiele
Titel beim Abspielen setzen
const audio = document.querySelector('audio');
if ('mediaSession' in navigator) {
navigator.mediaSession.metadata = new MediaMetadata({
title: 'Morgenroutine',
artist: 'Die Frühaufsteher',
album: 'Tagesanbruch',
artwork: [{ src: '/covers/tagesanbruch-512.png', sizes: '512x512', type: 'image/png' }]
});
console.log(navigator.mediaSession.metadata.title);
}
audio.play();Titel beim Wechsel in einer Playlist aktualisieren
const playlist = [
{ src: '/audio/01.mp3', title: 'Intro' },
{ src: '/audio/02.mp3', title: 'Hauptthema' },
{ src: '/audio/03.mp3', title: 'Finale' }
];
let index = 0;
const audio = new Audio();
const metadata = new MediaMetadata({ artist: 'Stadtorchester' });
navigator.mediaSession.metadata = metadata;
const playTrack = async (i) => {
index = (i + playlist.length) % playlist.length;
audio.src = playlist[index].src;
metadata.title = playlist[index].title; // Anzeige wird sofort aktualisiert
await audio.play();
console.log(`Spielt jetzt: ${metadata.title}`);
};
navigator.mediaSession.setActionHandler('nexttrack', () => playTrack(index + 1));
navigator.mediaSession.setActionHandler('previoustrack', () => playTrack(index - 1));
audio.addEventListener('ended', () => playTrack(index + 1));
document.querySelector('#play').addEventListener('click', () => playTrack(0));Standardwert und Typumwandlung
const meta = new MediaMetadata();
console.log(JSON.stringify(meta.title));
meta.title = 42;
console.log(typeof meta.title, meta.title);// Wichtig · Fallstricke
- Feature-Erkennung: Vor der Nutzung mit
'mediaSession' in navigatorprüfen. Ältere Browser (Firefox vor 82, Safari vor 15) kennenMediaMetadatanicht und werfen sonst einenReferenceError. - Nur bei aktiver Wiedergabe sichtbar: Der Titel erscheint meist erst, wenn ein
<audio>- oder<video>-Element wirklich abspielt. Stumme oder sehr kurze Medien ignorieren manche Browser. - Den richtigen Wert ändern: Wenn du
titlenachträglich änderst, muss es auf genau dem Objekt geschehen, dasnavigator.mediaSession.metadatazugewiesen ist. Eine Kopie zu ändern hat keine sichtbare Wirkung. - Sicheren Kontext nutzen: Einige Browser stellen die Media Session API nur über HTTPS bereit.
- Der Titel wird als reiner Text angezeigt, HTML wird nicht interpretiert. Sehr lange Titel kürzt das Betriebssystem, deshalb sollten sie knapp bleiben.