Signatur
Beschreibung
Die Eigenschaft artist des MediaMetadata-Interfaces enthält als Zeichenkette den Namen des Künstlers, der Gruppe, des Podcast-Hosts oder allgemein des Urhebers des gerade wiedergegebenen Mediums. Sie ist lesend und schreibend zugänglich.
Zusammen mit title, album und artwork bildet sie die Metadaten, die der Browser über die Media Session API an das Betriebssystem weitergibt. Dort erscheinen sie in Mediensteuerungen, etwa auf dem Sperrbildschirm von Android, in der macOS-Kontrollleiste, im Windows-Medien-Overlay oder auf Bluetooth-Geräten und Smartwatches.
Sinnvoll ist das bei jeder Web-Anwendung, die Audio oder Video wiedergibt: Musik-Player, Podcast-Apps, Hörbuch-Plattformen oder Video-Streaming. Setzt man den Wert auf ein MediaMetadata-Objekt, das bereits navigator.mediaSession.metadata zugewiesen ist, aktualisiert der Browser die Anzeige sofort, zum Beispiel beim Wechsel zum nächsten Titel.
Beispiele
Metadaten beim Abspielen setzen und artist auslesen
const audio = document.querySelector('audio');
if ('mediaSession' in navigator) {
navigator.mediaSession.metadata = new MediaMetadata({
title: 'Bohemian Rhapsody',
artist: 'Queen',
album: 'A Night at the Opera',
artwork: [
{ src: '/covers/opera-512.png', sizes: '512x512', type: 'image/png' }
]
});
console.log(navigator.mediaSession.metadata.artist);
}
audio.play();Künstler beim Titelwechsel in einer Playlist aktualisieren
const playlist = [
{ src: '/audio/1.mp3', title: 'Clair de Lune', artist: 'Claude Debussy' },
{ src: '/audio/2.mp3', title: 'Gymnopédie No. 1', artist: 'Erik Satie' }
];
const audio = new Audio();
const metadata = new MediaMetadata();
navigator.mediaSession.metadata = metadata;
let index = 0;
const playTrack = async (i) => {
const track = playlist[i];
audio.src = track.src;
// Bestehendes Objekt ändern – die Systemanzeige aktualisiert sich
metadata.title = track.title;
metadata.artist = track.artist;
await audio.play();
console.log(`Jetzt läuft: ${metadata.title} – ${metadata.artist}`);
};
navigator.mediaSession.setActionHandler('nexttrack', () => {
index = (index + 1) % playlist.length;
playTrack(index);
});
document.querySelector('#play').addEventListener('click', () => playTrack(index));Standardwert und Typumwandlung
const meta = new MediaMetadata({ title: 'Folge 42' });
console.log(JSON.stringify(meta.artist));
meta.artist = 123;
console.log(typeof meta.artist, meta.artist);// Wichtig · Fallstricke
- Feature-Erkennung: Vor der Nutzung mit
'mediaSession' in navigatorprüfen. Ältere Browser, besonders Safari vor Version 15, kennenMediaMetadatanicht und werfen sonst einenReferenceError. - Nur ein Wert möglich:
artistist eine einfache Zeichenkette und keine Liste. Mehrere Künstler also selbst zusammenfügen, etwa mit['A', 'B'].join(', '). - Typumwandlung: Zugewiesene Werte werden in Zeichenketten umgewandelt.
nullwird dabei zu\"null\"und nicht zu einem leeren Wert. Zum Leeren deshalb\"\"zuweisen. - Anzeige: Die Systemsteuerung zeigt Metadaten meist erst an, wenn ein Medienelement tatsächlich abspielt. Wie der Wert dargestellt und ob er gekürzt wird, hängt von Plattform und Browser ab.
- Die Media Session API ist nur in sicheren Kontexten (HTTPS) verfügbar.