Media Session

Gives the lock screen and headphones the track's title, artwork and controls.

Now Playing on a phone: the cover, the title and artist, a seek bar, and the play controls — The cover, title and artist shown here are handed to the lock screen and headphone controls.

How Riff uses it

Each new track builds a MediaMetadata with title, artist, album and every artwork size. Eight action handlers map the system's play, pause, previous, next, seek and stop onto the player's own functions. The playing state and position are mirrored, position at most once a second.

Why

The lock screen, headphones and the system media widget would otherwise show a blank page title and could not skip tracks.

Without it

Guarded by feature checks and a try/catch per action, so the on-page controls are the only controls.

Where

plugins/riff/assets/player/session.js, line 9

navigator.mediaSession.metadata = new window.MediaMetadata( {

plugins/riff/assets/player/session.js, line 75

navigator.mediaSession.setActionHandler( action, handler );

plugins/riff/assets/player/session.js, line 35
```
navigator.mediaSession.setPositionState( {
```

Links open the source at the commit this page was published from.

Specification: Media Session. Reference: Media Session on MDN.