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

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 の定義
ドラフト 初回定義

ブラウザーの対応

機能ChromeEdgeFirefoxInternet ExplorerOperaSafari
基本対応 なし ? ? ? なし ?
metadata なし ? ? ? なし ?
playbackState なし ? ? ? なし ?
setActionHandler なし ? ? ? なし ?
機能Android webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
基本対応 なし57 ? ? なし ? ?
metadata なし57 ? ? なし ? ?
playbackState なし57 ? ? なし ? ?
setActionHandler なし57 ? ? なし ? ?

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

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