MediaSession

Experimental: これは実験的な機能です。
本番で使用する前にブラウザー互換性一覧表をチェックしてください。

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

プロパティ

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

メソッド

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

例

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

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

仕様書

Specification
Media Session Standard # the-mediasession-interface

ブラウザーの対応

BCD tables only load in the browser