Media sessionLimited availability

The navigator.mediaSession API integrates with platform UI for media playback. It can be used to set metadata such as title and artwork, and to handle user actions like playing, pausing, or seeking.

Not yet supported in all major browsers — check the table and provide a fallback.

How to use ↓Compare browsers

Browser support

DesktopChrome

1–72Not supported

73+Supportedsince Mar 12, 2019

Current: 155

Edge

12–18Not supported

79+Supportedsince Jan 15, 2020

Current: 154

Firefox

1–81Not supported

82+Supportedsince Oct 20, 2020

Current: 157

Safari

1–14.1Not supported

15+Supportedsince Sep 20, 2021

Current: 27

MobileChrome Android

18–56Not supported

57+Supportedsince Mar 16, 2017

Current: 155

Firefox Android

✕Not supportedup to 157

Current: 157

Safari iOS

1–14.5Not supported

15+Supportedsince Sep 20, 2021

Current: 27

How to use

Not supported in Firefox Android. Use feature detection below and provide a fallback (or a polyfill) for those browsers.

Example

Full syntax and examples are on MDN: ChapterInformation.

Feature detection

JS · check before using

if ("MediaSession" in globalThis) {
  // MediaSession is available
} else {
  // load a polyfill or use a fallback
}

Documentation (MDN)

Specification

w3c.github.io/mediasession ↗

Sub-features

Support for each part of the feature (34). The overall table above shows when the whole feature works.

Sub-feature	Chrome	Edge	Firefox	Safari	Chrome Android	Firefox Android	Safari iOS
ChapterInformation	127	127	✕	✕	127	✕	✕
ChapterInformation.artwork	127	127	✕	✕	127	✕	✕
ChapterInformation.startTime	127	127	✕	✕	127	✕	✕
ChapterInformation.title	127	127	✕	✕	127	✕	✕
MediaMetadata	57	79	82	14	57	✕	14
MediaMetadata.MediaMetadata	57	79	82	14	57	✕	14
MediaMetadata.album	57	79	82	14	57	✕	14
MediaMetadata.artist	57	79	82	14	57	✕	14
MediaMetadata.artwork	57	79	82	14	57	✕	14
MediaMetadata.chapterInfo	127	127	✕	✕	127	✕	✕
MediaMetadata.title	57	79	82	14	57	✕	14
MediaSession	73	79	82	15	57	✕	15
MediaSession.metadata	73	79	82	15	57	✕	15
MediaSession.playbackState	73	79	82	15	57	✕	15
MediaSession.setActionHandler	73	79	82	15	57	✕	15
MediaSession.setActionHandler.hangup_type	93	93	✕	✕	93	✕	✕
MediaSession.setActionHandler.nextslide_type	111	111	✕	✕	111	✕	✕
MediaSession.setActionHandler.nexttrack_type	73	79	82	15	57	✕	15
MediaSession.setActionHandler.pause_type	73	79	82	15	57	✕	15
MediaSession.setActionHandler.play_type	73	79	82	15	57	✕	15

Show 14 more

Sub-feature	Chrome	Edge	Firefox	Safari	Chrome Android	Firefox Android	Safari iOS
MediaSession.setActionHandler.previousslide_type	111	111	✕	✕	111	✕	✕
MediaSession.setActionHandler.previoustrack_type	73	79	82	15	57	✕	15
MediaSession.setActionHandler.seekbackward_type	73	79	82	15	57	✕	15
MediaSession.setActionHandler.seekforward_type	73	79	82	15	57	✕	15
MediaSession.setActionHandler.seekto_type	78	79	82	15	78	✕	15
MediaSession.setActionHandler.skipad_type	128	128	82	15	128	✕	15
MediaSession.setActionHandler.stop_type	77	79	82	15	77	✕	15
MediaSession.setActionHandler.togglecamera_type	93	93	✕	18.4	93	✕	18.4
MediaSession.setActionHandler.togglemicrophone_type	93	93	✕	18.4	93	✕	18.4
MediaSession.setCameraActive	93	93	✕	18.4	93	✕	18.4
MediaSession.setMicrophoneActive	93	93	✕	18.4	93	✕	18.4
MediaSession.setPositionState	81	81	82	15	57	✕	15
MediaSession.setScreenshareActive	✕	✕	✕	18.4	✕	✕	18.4
Navigator.mediaSession	73	79	82	15	57	82	15