Media Session API

Permalink

Google hat in Chrome eine API eingebaut über die ich neulich erst gestolpert bin. Es geht um die Media Session API. Durch die API werden zwei Ziele verfolgt:

  1. Anzeigen von Informationen über abgespielte Medieninhalte in den Playback-Notifications des Betriebssystems
  2. Steuern des Playbacks aus eben diesen Notifications heraus.

Metadaten

Zur API gehört eine Klasse MediaMetadata. Objekte dieser Klasse können an navigator.mediaSession.metadata übergeben werden und enthalten vier Angaben zum abgespielten Video oder zur Audiodatei: Titel, Artist, Album und ein Array von Bildern.

Ich benutze für meinen Podcatcher die drei dieser Angaben um den Namen der Podcastepisode (Titel), den Namen des Podcasts (Artist) und das Logo des Podcasts anzugeben. Die Angabe zum Album nutze ich nicht. Im Ergebnis erhält man eine Anzeige wie die folgende:

Playback-Notification auf dem Sperrbildschrim unter Android
Playback-Notification auf dem Sperrbildschirm unter Android.

Wie man sieht, wirken sich diese Angaben auf die Darstellung der Notification aus. Das angegebene Bild wird aber auch als Hintergrund des Sperrbildschirms genutzt.

Den folgenden Code muss ich natürlich immer aufrufen wenn eine neue Episode abgespielt wird um die Daten zu aktualisieren.

if ('mediaSession' in navigator) {
	const metadata = {}
	if (episode.title) {
	  metadata.title = episode.title
	}
	if (episode.source) {
	  metadata.artist = episode.source
	}
	if (episode.image) {
	  metadata.artwork = [
		{ src: episode.image }
	  ]
	}
	navigator.mediaSession.metadata = new MediaMetadata(metadata)
}

Warum sich Google zu diesem Zweck für eine Javascript-API entschieden hat verstehe ich nicht ganz. Ich hätte eher zusätzliche Attribute an den HTML-Elementen <audio> und <video> spezifiziert. Das würde dann auch ohne Javascript funktionieren.

Playbacksteuerung

Normalerweise werden die Playback-Notifications unter Android nur mit zwei Funktionen versehen. Antippen der Notification bringt den Browser in den Vordergrund der gerade etwas abspielt. Ein Play/Pause-Button tut genau das: Pausieren oder Wiedergabe fortsetzen.

Mit der Media Session API kann man dies um vier Funktionen erweitern. Es wird so möglich Sprünge im aktuelle abgespielte Titel (vorwärts und rückwärts) sowie zum nächsten bzw. vorherigen Titel in einer Playlist zu springen.

Diese zusätzlichen Funktionen können sowohl über entsprechende Symbole in der Notification als auch über Multi-Media-Keys auf Tastaturen oder Headsets ausgelöst werden. Genau dafür hatte ich bisher Listener für Keyboard-Events eingesetzt. Diese haben aber ein Problem: Sie werden nur aufgerufen wenn der Browser mit meinem Podcatcher im Vordergrund ist. Also insbesondere nicht wenn Android den Sperrbildschirm anzeigt – sehr unbefriedigend. Durch die neue Umsetzung auf Basis der API ist das jetzt zu mindestens bei der Nutzung von Chrome besser gelöst.

if ('mediaSession' in navigator) {
  navigator.mediaSession.setActionHandler('play', this.play.bind(this))
  navigator.mediaSession.setActionHandler('pause', this.pause.bind(this))
  navigator.mediaSession.setActionHandler('seekbackward', this.seekBackward.bind(this))
  navigator.mediaSession.setActionHandler('seekforward', this.seekForward.bind(this))
  navigator.mediaSession.setActionHandler('previoustrack', this.previousTrack.bind(this))
  navigator.mediaSession.setActionHandler('nexttrack', this.nextTrack.bind(this))
} else {
  document.addEventListener('keydown', (event) => {…}, false)
  document.addEventListener('keyup', (event) => {…}, false)
}

Fazit

Die API ist insbesondere unter Android interessant (iOS habe ich nicht zur Hand um dazu was sagen zu können). Unter Desktop-Betriebssystemen beschränkt sich die Verbesserung auf die Unterstützung der Multimediatasten.

Schön wäre es allerdings wenn sich auch andere Browser darauf einlassen würden und die Metadaten auch ohne den Einsatz von Javascript angegeben werden könnten.