Riff

Riff / Built on the open web / Media

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

Without it the lock screen, headphones and the system media widget would 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

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

Reference: Media Session on MDN.