This is an experimental technology
Check the Browser compatibility table carefully before using this in production.

The MediaSession interface of the Media Session API allows a web page to provide custom behaviors for standard media playback interactions.

Properties

MediaSession.metadata
Returns an instance of MediaMetadata which contains rich media metadata, for display in a platform UI.
MediaSession.playbackState
Indicates whether the current media session is playing. Valid values are "none", "paused", or "playing".

Methods

MediaSession.setActionHandler()
Sets an event handler for a media session action, such as play or pause. See the method page for a full list.

Examples

The following example creates a new media session and assigns action handlers to it:

if ('mediaSession' in navigator){
  navigator.mediaSession.metadata = new MediaMetadata({
    title: "Podcast Episode Title",
    artist: "Podcast Host",
    album: "Podcast Name",
    artwork: [{src: "podcast.jpg"}]
  });
  navigator.mediaSession.setActionHandler('play', function() {});
  navigator.mediaSession.setActionHandler('pause', function() {});
  navigator.mediaSession.setActionHandler('seekbackward', function() {});
  navigator.mediaSession.setActionHandler('seekforward', function() {});
  navigator.mediaSession.setActionHandler('previoustrack', function() {});
  navigator.mediaSession.setActionHandler('nexttrack', function() {});
}

The following example sets up event handlers for pausing and playing:

var audio = document.querySelector("#player");
audio.src = "song.mp3";

navigator.mediaSession.setActionHandler('play', play);
navigator.mediaSession.setActionHandler('pause', pause);

function play() {
   audio.play();
   navigator.mediaSession.playbackState = "playing";
}

function pause() {
   audio.pause();
   navigator.mediaSession.playbackState = "paused";
}

Specifications

Specification Status Comment
Media Session Standard
The definition of 'MediaSession' in that specification.
Draft Initial definition.

Browser compatibility

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidEdge MobileFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
Basic support
ExperimentalNon-standard
Chrome No support NoEdge ? Firefox ? IE ? Opera No support NoSafari ? WebView Android No support NoChrome Android Full support 57Edge Mobile ? Firefox Android ? Opera Android No support NoSafari iOS ? Samsung Internet Android ?
metadata
ExperimentalNon-standard
Chrome No support NoEdge ? Firefox ? IE ? Opera No support NoSafari ? WebView Android No support NoChrome Android Full support 57Edge Mobile ? Firefox Android ? Opera Android No support NoSafari iOS ? Samsung Internet Android ?
playbackState
ExperimentalNon-standard
Chrome No support NoEdge ? Firefox ? IE ? Opera No support NoSafari ? WebView Android No support NoChrome Android Full support 57Edge Mobile ? Firefox Android ? Opera Android No support NoSafari iOS ? Samsung Internet Android ?
setActionHandler
ExperimentalNon-standard
Chrome No support NoEdge ? Firefox ? IE ? Opera No support NoSafari ? WebView Android No support NoChrome Android Full support 57Edge Mobile ? Firefox Android ? Opera Android No support NoSafari iOS ? Samsung Internet Android ?

Legend

Full support  
Full support
No support  
No support
Compatibility unknown  
Compatibility unknown
Experimental. Expect behavior to change in the future.
Experimental. Expect behavior to change in the future.
Non-standard. Expect poor cross-browser support.
Non-standard. Expect poor cross-browser support.

Document Tags and Contributors

Contributors to this page: mfuji09, joshyrobot, DeltaEvo, fscholz, gonchuki, david_ross, jpmedley
Last updated by: mfuji09,