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

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 版 ChromeEdge MobileAndroid 版 FirefoxAndroid 版 OperaiOS 版 SafariSamsung Internet
基本対応
実験的非標準
Chrome 未対応 なしEdge ? Firefox ? IE ? Opera 未対応 なしSafari ? WebView Android 未対応 なしChrome Android 完全対応 57Edge Mobile ? Firefox Android ? Opera Android 未対応 なしSafari iOS ? Samsung Internet Android ?
metadata
実験的非標準
Chrome 未対応 なしEdge ? Firefox ? IE ? Opera 未対応 なしSafari ? WebView Android 未対応 なしChrome Android 完全対応 57Edge Mobile ? Firefox Android ? Opera Android 未対応 なしSafari iOS ? Samsung Internet Android ?
playbackState
実験的非標準
Chrome 未対応 なしEdge ? Firefox ? IE ? Opera 未対応 なしSafari ? WebView Android 未対応 なしChrome Android 完全対応 57Edge Mobile ? Firefox Android ? Opera Android 未対応 なしSafari iOS ? Samsung Internet Android ?
setActionHandler
実験的非標準
Chrome 未対応 なしEdge ? Firefox ? IE ? Opera 未対応 なしSafari ? WebView Android 未対応 なしChrome Android 完全対応 57Edge Mobile ? Firefox Android ? Opera Android 未対応 なしSafari iOS ? Samsung Internet Android ?

凡例

完全対応  
完全対応
未対応  
未対応
実装状況不明  
実装状況不明
実験的。動作が変更される可能性があります。
実験的。動作が変更される可能性があります。
非標準。ブラウザー間の互換性が低い可能性があります。
非標準。ブラウザー間の互換性が低い可能性があります。

ドキュメントのタグと貢献者

このページの貢献者: mfuji09
最終更新者: mfuji09,