News
Meetup
YouTube
Blog
書き起こし
2022/04/01 に公開
492 views
このエピソードについて
@spring-raining が、@potato4d にプラウザ上での音声や動画を制御できる MediaSession API について聞いてみました。
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
1.0x
1.3x
1.5x