MediaSession

これは実験的な機能です。本番で使用する前にブラウザー実装状況をチェックしてください。

Media Session APIMediaSession インターフェースは、ウェブページで標準のメディア再生操作に対する専用の動作を提供します。

プロパティ

MediaSession.metadata
プラットフォームのユーザーインターフェイスに表示するためのリッチメタデータを含む MediaMetadata のインスタンスを返します。
MediaSession.playbackState
現在のメディアセッションが再生中であるかどうかを示します。有効な値は "none", "paused", "playing"です。

メソッド

MediaSession.setActionHandler()
再生や一時停止などのメディアセッションの操作のためのイベントハンドラーを設定します。完全な一覧はメソッドのページをご覧ください。

以下の例では、新しいメディアセッションを作成し、それにアクションハンドラーを割り当てます。

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() {});
}

以下の例では、一時停止と再生のためのイベントハンドラーを設定します。

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";
}

仕様書

仕様書 状態 備考
Media Session Standard
MediaSession の定義
ドラフト 初回定義

ブラウザーの対応

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
MediaSession
実験的
Chrome 完全対応 73Edge 完全対応 ≤79Firefox 完全対応 71
無効
完全対応 71
無効
無効 From version 71: this feature is behind the dom.media.mediasession.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE 未対応 なしOpera 完全対応 ありSafari 未対応 なしWebView Android 未対応 なしChrome Android 完全対応 57Firefox Android 未対応 なしOpera Android 未対応 なしSafari iOS 未対応 なしSamsung Internet Android 完全対応 7.0
metadata
実験的
Chrome 完全対応 73Edge 完全対応 ≤79Firefox 完全対応 71
無効
完全対応 71
無効
無効 From version 71: this feature is behind the dom.media.mediasession.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE 未対応 なしOpera 完全対応 ありSafari 未対応 なしWebView Android 未対応 なしChrome Android 完全対応 57Firefox Android 未対応 なしOpera Android 未対応 なしSafari iOS 未対応 なしSamsung Internet Android 完全対応 7.0
playbackState
実験的
Chrome 完全対応 73Edge 完全対応 ≤79Firefox 完全対応 76
無効
完全対応 76
無効
無効 From version 76: this feature is behind the dom.media.mediasession.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE 未対応 なしOpera 完全対応 ありSafari 未対応 なしWebView Android 未対応 なしChrome Android 完全対応 57Firefox Android 未対応 なしOpera Android 未対応 なしSafari iOS 未対応 なしSamsung Internet Android 完全対応 7.0
setActionHandler()
実験的
Chrome 完全対応 73Edge 完全対応 ≤79Firefox 完全対応 71
無効
完全対応 71
無効
無効 From version 71: this feature is behind the dom.media.mediasession.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE 未対応 なしOpera 完全対応 ありSafari 未対応 なしWebView Android 未対応 なしChrome Android 完全対応 57Firefox Android 未対応 なしOpera Android 未対応 なしSafari iOS 未対応 なしSamsung Internet Android 完全対応 7.0
setPositionState()
実験的
Chrome 完全対応 73Edge 完全対応 ≤79Firefox 完全対応 76
無効
完全対応 76
無効
無効 From version 76: this feature is behind the dom.media.mediasession.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE 未対応 なしOpera 完全対応 ありSafari 未対応 なしWebView Android 未対応 なしChrome Android 完全対応 57Firefox Android 未対応 なしOpera Android 未対応 なしSafari iOS 未対応 なしSamsung Internet Android 完全対応 7.0

凡例

完全対応  
完全対応
未対応  
未対応
実験的。動作が変更される可能性があります。
実験的。動作が変更される可能性があります。
ユーザーが明示的にこの機能を有効にしなければなりません。
ユーザーが明示的にこの機能を有効にしなければなりません。