このページは Cloud Translation API によって翻訳されました。

Media Session API を使用してメディア通知と再生コントロールをカスタマイズする

ハードウェアのメディアキーとの統合方法、メディア通知のカスタマイズ方法など。

François Beaufort

ブラウザで現在再生中のコンテンツをユーザーに知らせ、そのコンテンツを制御するため起動したページに戻ることなく導入しました。ウェブデベロッパーはこのエクスペリエンスをカスタマイズするためにカスタムメディア通知のメタデータ（再生、一時停止、移動、追跡変更、ビデオ会議イベント（ミュートやミュート解除など）マイク、カメラのオン/オフ、電話を切るなどの操作を行えます。これらのカスタマイズはデスクトップのメディアハブやウェアラブルデバイスにも対応していますこれらのカスタマイズについてはご覧ください。

メディアセッションのコンテキストのスクリーンショット。 — パソコンのメディアハブ、モバイルのメディア通知、ウェアラブルデバイス。

Media Session API について

Media Session API にはいくつかの利点と機能があります。

ハードウェアのメディアキーがサポートされています。
メディア通知は、モバイル、パソコン、ペア設定されたウェアラブルデバイスでカスタマイズされます。
メディアハブはパソコンで利用できます。
ロック画面のメディアコントロールは、ChromeOS とモバイルで使用できます。
ピクチャーインピクチャーのウィンドウコントロールは、音声再生に使用できます。ビデオ会議、プレゼンテーションなどがあります。
モバイルでもアシスタントを統合できます。

対応ブラウザ

<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">

ソース

そのいくつかを、例で説明します。

例 1: ユーザーが「次のトラック」を押した場合キーボードのメディアキーブラウザがフォアグラウンドにあるかどうかに関係なく、ウェブデベロッパーはこのユーザー操作を処理できる背景を選択できます。

例 2: ユーザーがデバイスでポッドキャストを聴いている場合「戻る」アイコンを押せばアイコンからスクリーンメディアコントロールにより、ウェブデベロッパーが再生時間を少し早戻し可能に秒です。

例 3: 音声を再生しているタブがある場合、ユーザーは簡単にそのタブを停止できます。デスクトップのメディアハブから再生できるため、ウェブデベロッパーは状態をクリアします。

例 4: ビデオ通話中に、ユーザーはマイク」コントロールを使用してウェブサイトを停止し、受信しています。

これはすべて、2 つの異なるインターフェース（MediaSession インターフェース）を介して行われます。 MediaMetadata インターフェースがあります。1 つ目の方法では、ユーザーは GCP 上の再生します。2 つ目は、制御する必要があるものを MediaSession に伝える方法です。

下の画像は、これらのインターフェースが特定のサービスアカウントにメディアコントロール。この例では、モバイルのメディア通知です。

再生中の曲をユーザーに知らせましょう

ウェブサイトで音声や動画を再生しているときには、メディアが自動的に表示されます。モバイルの場合は通知トレイ、または Google Meet のできます。ブラウザは、最善を尽くして適切な情報を表示し、ドキュメントのタイトルと、ドキュメント内で見つかった最も大きなアイコン画像などです。メディアセッションを使用 API を使用すると、リッチメディアを使用してメディア通知をカスタマイズできます。タイトル、アーティスト名、アルバム名、アートワークなどのメタデータを以下のように指定できます。

Chrome が「フル」をリクエスト音声フォーカスを使用して、音声フォーカスがメディア再生時間が5 秒以上。これにより偶発的なサウンドが通知は表示されません。

// After media (video or audio) starts playing
await document.querySelector("video").play();

if ("mediaSession" in navigator) {
  navigator.mediaSession.metadata = new MediaMetadata({
    title: 'Never Gonna Give You Up',
    artist: 'Rick Astley',
    album: 'Whenever You Need Somebody',
    artwork: [
      { src: 'https://via.placeholder.com/96',   sizes: '96x96',   type: 'image/png' },
      { src: 'https://via.placeholder.com/128', sizes: '128x128', type: 'image/png' },
      { src: 'https://via.placeholder.com/192', sizes: '192x192', type: 'image/png' },
      { src: 'https://via.placeholder.com/256', sizes: '256x256', type: 'image/png' },
      { src: 'https://via.placeholder.com/384', sizes: '384x384', type: 'image/png' },
      { src: 'https://via.placeholder.com/512', sizes: '512x512', type: 'image/png' },
    ]
  });

  // TODO: Update playback state.
}

再生が終了したら、「離す」必要がない指定したメディアセッションを通知は自動的に消えます。注意点として navigator.mediaSession.metadata は、次の再生が開始されたときに使用されます。ありますそのため、メディア再生ソースの変更時には、イベントオブジェクトをアップデートすることが重要です。メディア通知に関連情報が表示されるように変更する必要があります。

メディアのメタデータについては、いくつか注意すべき点があります。

通知アートワークの配列は、blob URL とデータ URL をサポートしています。
アートワークが定義されておらず、適切なサイズのアイコン画像（<link rel=icon> を使用して指定）がある場合は、メディア通知でその画像が使用されます。
Chrome for Android での通知アートワークのターゲットサイズは 512x512 です。対象ローエンドのデバイスの場合は、256x256 です。
メディア HTML 要素の title 属性は、「この曲なに？」機能で使用されています。 macOS ウィジェット。
メディアリソースが埋め込まれている場合（iframe など）、Media Session API 埋め込みコンテキストから設定する必要があります。以下のスニペットをご覧ください。

<iframe id="iframe">
  <video>...</video>
</iframe>
<script>
  iframe.contentWindow.navigator.mediaSession.metadata = new MediaMetadata({
    title: 'Never Gonna Give You Up',
    ...
  });
</script>

また、セクションのタイトル、タイムスタンプ、スクリーンショット画像など、個々のチャプター情報をメディアのメタデータに追加することもできます。これにより、ユーザーはメディアのコンテンツ内を移動できます。

navigator.mediaSession.metadata = new MediaMetadata({
  // title, artist, album, artwork, ...
  chapterInfo: [{
    title: 'Chapter 1',
    startTime: 0,
    artwork: [
      { src: 'https://via.placeholder.com/128', sizes: '128x128', type: 'image/png' },
      { src: 'https://via.placeholder.com/512', sizes: '512x512', type: 'image/png' },
    ]
  }, {
    title: 'Chapter 2',
    startTime: 42,
    artwork: [
      { src: 'https://via.placeholder.com/128', sizes: '128x128', type: 'image/png' },
      { src: 'https://via.placeholder.com/512', sizes: '512x512', type: 'image/png' },
    ]
  }]
});

ChromeOS のメディア通知に表示されるチャプター情報。 — ChromeOS のチャプターを使用したメディア通知。

で確認できます。

ユーザーが再生中のコンテンツを操作できるようにする

メディアセッションのアクションとは、ウェブサイトで実行できる操作（「再生」や「一時停止」など）です。ユーザーが現在のメディア再生を操作するときのハンドルを設定します。アクション: イベントとほぼ同じように機能します。イベントと同様に、アクションは適切なオブジェクト（この場合は MediaSession です。ユーザーがヘッドセット、別のリモートデバイス、キーボードなどのボタンや、通知を受け取れます。

Windows 10 のメディア通知のスクリーンショット — Windows 10 のカスタムメディア通知

一部のメディアセッション操作はサポートされていない場合があるため、設定時に try…catch ブロックを使用します。

const actionHandlers = [
  ['play',          () => { /* ... */ }],
  ['pause',         () => { /* ... */ }],
  ['previoustrack', () => { /* ... */ }],
  ['nexttrack',     () => { /* ... */ }],
  ['stop',          () => { /* ... */ }],
  ['seekbackward',  (details) => { /* ... */ }],
  ['seekforward',   (details) => { /* ... */ }],
  ['seekto',        (details) => { /* ... */ }],
  /* Video conferencing actions */
  ['togglemicrophone', () => { /* ... */ }],
  ['togglecamera',     () => { /* ... */ }],
  ['hangup',           () => { /* ... */ }],
  /* Presenting slides actions */
  ['previousslide', () => { /* ... */ }],
  ['nextslide',     () => { /* ... */ }],
];

for (const [action, handler] of actionHandlers) {
  try {
    navigator.mediaSession.setActionHandler(action, handler);
  } catch (error) {
    console.log(`The media session action "${action}" is not supported yet.`);
  }
}

メディアセッションアクションハンドラの設定解除は、null に設定するのと同じくらい簡単です。

try {
  // Unset the "nexttrack" action handler at the end of a playlist.
  navigator.mediaSession.setActionHandler('nexttrack', null);
} catch (error) {
  console.log(`The media session action "nexttrack" is not supported yet.`);
}

設定すると、メディアセッションアクションハンドラはメディアの再生中も維持されます。これはイベントリスナーパターンと似ていますが、イベントを処理してブラウザはデフォルトの動作を停止し、これをウェブサイトがメディアアクションをサポートしていることを示します。つまりメディアアクションのコントロールは適切なアクションハンドラを設定しない限り、各プロパティは表示されません。

macOS Big Sur の「この曲なに？」ウィジェットのスクリーンショット。 — macOS Big Sur の「この曲なに？」ウィジェット。

再生 / 一時停止

"play" アクションは、ユーザーがメディアの再生を再開したいことを示します。 "pause" は一時的に停止します。

「再生/一時停止」アイコンは常にメディア通知と関連する通知にメディアイベントはブラウザによって自動的に処理されます。デフォルトの設定をオーバーライドするには「再生」を処理します。および「一時停止」次のようなメディアアクションを指定します。

メディアの再生中または再生中に、ブラウザでウェブサイトがメディアを再生していないと判断される場合があります。読み込むことができますこの場合は、動作をオーバーライドするために、 navigator.mediaSession.playbackState を "playing" または "paused" に設定して、ウェブサイトの UI をメディア通知コントロールと同期させる。

const video = document.querySelector('video');

navigator.mediaSession.setActionHandler('play', async () => {
  // Resume playback
  await video.play();
});

navigator.mediaSession.setActionHandler('pause', () => {
  // Pause active playback
  video.pause();
});

video.addEventListener('play', () => {
  navigator.mediaSession.playbackState = 'playing';
});

video.addEventListener('pause', () => {
  navigator.mediaSession.playbackState = 'paused';
});

前のトラック

"previoustrack" アクションは、ユーザーが現在のメディア再生を先頭から再開します。これは、メディア再生にプレイリスト内の前のアイテムに移動するか、メディアの再生中にプレイリストという概念があります

navigator.mediaSession.setActionHandler('previoustrack', () => {
  // Play previous track.
});

次のトラック

"nexttrack" アクションは、ユーザーがメディア再生の移動先を示すことを示します。メディア再生に再生リストの概念がある場合、再生リストの次のアイテム。

navigator.mediaSession.setActionHandler('nexttrack', () => {
  // Play next track.
});

停止

"stop" アクションは、ユーザーがメディアの再生の停止を希望することを示します。必要に応じて状態をクリアできます。

navigator.mediaSession.setActionHandler('stop', () => {
  // Stop playback and clear state if appropriate.
});

巻き戻し / 早送り

"seekbackward" アクションは、ユーザーがメディアを移動することを示します。再生時間を少し逆戻り、"seekforward" はリクエストを表示メディアの再生時間を少し早送りします。どちらの場合も、短い期間とは数秒を意味します。

アクションハンドラで指定される seekOffset 値は、API 呼び出しにメディアの再生時間をずらす。指定されていない場合（undefined など）、適切な時間（10 ～ 30 秒など）を使用する必要があります。

const video = document.querySelector('video');
const defaultSkipTime = 10; /* Time to skip in seconds by default */

navigator.mediaSession.setActionHandler('seekbackward', (details) => {
  const skipTime = details.seekOffset || defaultSkipTime;
  video.currentTime = Math.max(video.currentTime - skipTime, 0);
  // TODO: Update playback state.
});

navigator.mediaSession.setActionHandler('seekforward', (details) => {
  const skipTime = details.seekOffset || defaultSkipTime;
  video.currentTime = Math.min(video.currentTime + skipTime, video.duration);
  // TODO: Update playback state.
});

特定の時間に移動

"seekto" アクションは、ユーザーがメディア再生の移動を希望していることを示します。適用できます。

アクションハンドラで指定される seekTime 値は、API 呼び出しにメディアの再生時間を移動できます。

アクションハンドラで提供される fastSeek ブール値は、アクションがシーケンスの一部として複数回呼び出されており、これが最後の呼び出しではない必要があります。

const video = document.querySelector('video');

navigator.mediaSession.setActionHandler('seekto', (details) => {
  if (details.fastSeek && 'fastSeek' in video) {
    // Only use fast seek if supported.
    video.fastSeek(details.seekTime);
    return;
  }
  video.currentTime = details.seekTime;
  // TODO: Update playback state.
});

再生位置を設定する

メディアの再生位置を通知に正確に表示する方法以下のように、適切なタイミングで位置状態を設定することをおすすめします。「 position state は、メディアの再生速度、再生時間、現在の時刻が表示されます。

ChromeOS でのロック画面のメディアコントロールのスクリーンショット。 — ChromeOS でのロック画面のメディアコントロール

期間には正の値を指定してください。位置は正の値で、短い時間です再生速度には 0 より大きい値を指定してください。

const video = document.querySelector('video');

function updatePositionState() {
  if ('setPositionState' in navigator.mediaSession) {
    navigator.mediaSession.setPositionState({
      duration: video.duration,
      playbackRate: video.playbackRate,
      position: video.currentTime,
    });
  }
}

// When video starts playing, update duration.
await video.play();
updatePositionState();

// When user wants to seek backward, update position.
navigator.mediaSession.setActionHandler('seekbackward', (details) => {
  /* ... */
  updatePositionState();
});

// When user wants to seek forward, update position.
navigator.mediaSession.setActionHandler('seekforward', (details) => {
  /* ... */
  updatePositionState();
});

// When user wants to seek to a specific time, update position.
navigator.mediaSession.setActionHandler('seekto', (details) => {
  /* ... */
  updatePositionState();
});

// When video playback rate changes, update position state.
video.addEventListener('ratechange', (event) => {
  updatePositionState();
});

位置状態のリセットは、null に設定するのと同じくらい簡単です。

// Reset position state when media is reset.
navigator.mediaSession.setPositionState(null);

ビデオ会議の操作

ユーザーがビデオ通話をピクチャーインピクチャーウィンドウに入れると、ブラウザには、マイクやカメラのコントロールや、通話を終了するためのコントロールが表示されることがあります。ユーザーがこれらをクリックすると、ウェブサイトが動画全体で処理します会議に関する操作は以下のとおりです。例については、ビデオ会議のサンプルをご覧ください。

ピクチャーインピクチャーウィンドウのビデオ会議コントロールのスクリーンショット。 — ピクチャーインピクチャーウィンドウに表示されたビデオ会議コントロール。

で確認できます。

マイクを切り替える

"togglemicrophone" アクションは、ユーザーがミュートまたはミュート解除を希望していることを示します。できます。setMicrophoneActive(isActive) メソッドはブラウザに対して、ウェブサイトでマイクがアクティブであると認識されているかどうか。

let isMicrophoneActive = false;

navigator.mediaSession.setActionHandler('togglemicrophone', () => {
  if (isMicrophoneActive) {
    // Mute the microphone.
  } else {
    // Unmute the microphone.
  }
  isMicrophoneActive = !isMicrophoneActive;
  navigator.mediaSession.setMicrophoneActive(isMicrophoneActive);
});

カメラの切り替え

"togglecamera" アクションは、ユーザーがアクティブなオンとオフを切り替えられます。setCameraActive(isActive) メソッドは、Pod がブラウザはウェブサイトをアクティブとみなします。

let isCameraActive = false;

navigator.mediaSession.setActionHandler('togglecamera', () => {
  if (isCameraActive) {
    // Disable the camera.
  } else {
    // Enable the camera.
  }
  isCameraActive = !isCameraActive;
  navigator.mediaSession.setCameraActive(isCameraActive);
});

通話を終了

"hangup" アクションは、ユーザーが通話を終了することを示します。

navigator.mediaSession.setActionHandler('hangup', () => {
  // End the call.
});

プレゼンテーション用スライドの操作

ユーザーがスライドのプレゼンテーションをピクチャーインピクチャーウィンドウに配置すると、スライドを操作するコントロールがブラウザに表示される場合があります。ユーザーがウェブサイトが Media Session API を通じて処理します。1 つのプレゼンテーション用スライドのサンプルをご覧ください。

前のスライド

"previousslide" アクションは、ユーザーが前のページに戻ろうとすることを示します。前のスライドで詳しく解説します

navigator.mediaSession.setActionHandler('previousslide', () => {
  // Show previous slide.
});

対応ブラウザ

<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">

次のスライド

"nextslide" アクションは、ユーザーが次のスライドに進むことを示します。重要になります。

navigator.mediaSession.setActionHandler('nextslide', () => {
  // Show next slide.
});

対応ブラウザ

<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">

サンプル

Blender Foundation を取り上げたメディアセッションのサンプルをご覧ください。 Jan Morgenstern 氏の研究。

</ph> <ph type="x-smartling-placeholder">

Media Session API を示すスクリーンキャスト。

リソース

メディアセッションの仕様: wicg.github.io/mediasession
仕様に関する問題: github.com/WICG/mediasession/issues
Chrome のバグ: crbug.com