ep.116『Podcastのユーザー体験が大幅に改善するMediaSession API』

このエピソードについて

@spring-raining が、@potato4d にプラウザ上での音声や動画を制御できる MediaSession API について聞いてみました。

ブラウザ上で再生される音声や動画に対して、メタ情報を付与したり、Webページ上以外からの操作を可能とするAPI
- 現在は Editor’s Draft として定義されている
- https://w3c.github.io/mediasession/#dom-navigator-mediasession
モダンブラウザ全てで実装されており、現在十分に利用できる状態にある
- https://caniuse.com/?search=MediaSession

実は UIT INSIDE でも対応しました
Customize media notifications and playback controls outside the browser https://www.youtube.com/watch?v=Ft6diPReUAU
再生している動画・音声のメタ情報を表示できる
- MediaMetadata が window に生えており、 new することでメタデータの入ったオブジェクトを生成可能
  - タイトル・アーティスト・アートワーク（thumbnail）が設定可能
  - ブラウザのメディア通知と連携することが前提とされているので、音声コンテンツ・動画コンテンツでそれぞれ多少違った情報を表示できる
音声・動画のコントロールが可能
- ある程度はブラウザ側がメディア通知をよしなに取り扱ってくれるが、完全ではない
  - 基本的にブラウザがやってくれるのは再生・一時停止くらい
  - MediaSession API を使うと、トラックのスキップやシークなどの操作も JS のロジックと共有できる
  - Action Handler は実装状況がまちまちなようなので、使うときはいくつかブラウザを横断してみてもらうと良いかも