MediaSession API とは？

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

MediaSession API でできること

• 実は 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 は実装状況がまちまちなようなので、使うときはいくつかブラウザを横断してみてもらうと良いかも

こういうときに使えそう

• 音声や動画を使うサイトだととりあえず対応しておいて損はなさそう
• シンプルな機能以上のことを使うにはアプリケーションごとのマッチが求められそう

Refs

• LINE 新卒採用 2023
  • https://linecorp.com/ja/career/newgrads/engineering/
• キャリア採用はこちらから
  • https://linecorp.com/ja/career/position/475
• BGM&SE
  • 魔王魂/騒音のない世界/OtoLogic