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
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
Desktop | Mobile | ||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|
Basic support | Chrome No support No | Edge ? | Firefox ? | IE ? | Opera No support No | Safari ? | WebView Android No support No | Chrome Android Full support 57 | Edge Mobile ? | Firefox Android ? | Opera Android No support No | Safari iOS ? | Samsung Internet Android ? |
metadata | Chrome No support No | Edge ? | Firefox ? | IE ? | Opera No support No | Safari ? | WebView Android No support No | Chrome Android Full support 57 | Edge Mobile ? | Firefox Android ? | Opera Android No support No | Safari iOS ? | Samsung Internet Android ? |
playbackState | Chrome No support No | Edge ? | Firefox ? | IE ? | Opera No support No | Safari ? | WebView Android No support No | Chrome Android Full support 57 | Edge Mobile ? | Firefox Android ? | Opera Android No support No | Safari iOS ? | Samsung Internet Android ? |
setActionHandler | Chrome No support No | Edge ? | Firefox ? | IE ? | Opera No support No | Safari ? | WebView Android No support No | Chrome Android Full support 57 | Edge Mobile ? | Firefox Android ? | Opera Android No support No | Safari 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.