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

FeatureChromeEdgeFirefoxInternet ExplorerOperaSafari
Basic support No ? ? ? No ?
metadata No ? ? ? No ?
playbackState No ? ? ? No ?
setActionHandler No ? ? ? No ?
FeatureAndroid webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
Basic support No57 ? ? No ? ?
metadata No57 ? ? No ? ?
playbackState No57 ? ? No ? ?
setActionHandler No57 ? ? No ? ?

Document Tags and Contributors

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