Global Media Controls で Alexa SPA を操作する Chrome 拡張を作った
モチベーション
音楽を聴くときは Amazon Echo のマルチルームオーディオを使っている。 いろんな部屋で同じ曲が流れるのはいい経験だが、曲名を確認したり、曲をスキップしたいときに、声を出さないといけない。 そこで https://alexa.amazon.co.jp/spa/index.html#player (以下 Alexa SPA) を使うと、Web ブラウザから曲名を確認したり、曲をスキップできて便利なので、合わせて使っている。
最近 Chrome 79 で YouTube Music を聴いてたら、Chrome のツールバーに音楽のツールバーが表示されるようになったことに気づいた。
調べたら Global Media Controls という言うらしい。Chrome 79 時点では実験的な実装とされている。 これを Alexa SPA でも使いたいと思ったので、 Chrome 拡張で実装してみた
alexa-spa-global-media-controls
Chrome ストアには上げていないので、試してみたい場合はクローンして、Chrome に読み込んで欲しい。
拡張をインストールした状態で https://alexa.amazon.co.jp/spa/index.html#player にアクセスして、Alexa で音楽を流せばツールバーに以下のように表示される。
実装の話
日本語のドキュメントが余りなかったのと、細かいところで結構ハマったので、ハマりどころをまとめる。
Chrome 79.0.3945.130
時点の話なので、今後改善する可能性は高い。
ツールバーに表示されない
基本的には MediaSession API を以下のように使うだけのはずである。
navigator.mediaSession.metadata = new MediaMetadata({ title: '曲名', artist: 'アーティスト名', album: 'アルバム名', artwork: [ { src:' アルバムアートの URL' } ] });
しかし、これを呼び出してもツールバーにボタンが表示されない。
調べてみると実際のタブで video
タグや audio
タグで実際に音声が再生されている必要があるらしい。
しかも、 5秒以上の音声ファイルを再生している必要があるらしい。
Alexa SPA では実際の音は Amazon Echo から流れるため、タブで音楽を再生することはできない。
そこで、無音の ogg ファイルを用意して、 DOM の状態を見て、再生したり停止するように実装した。
アルバム名の表示位置が変
MediaSession API に素直に album 属性を渡すと、ドメインの横に表示される。
YouTube Music はどうしてるのか見てみたら artist
属性にアルバム名を含めるようにしていた。
なんか釈然としないが、似たような感じで実装した。
navigator.mediaSession.metadata = new MediaMetadata({ title: '曲名 - アルバム名', artist: 'アーティスト名', artwork: [ { src:' アルバムアートの URL' } ] });
アルバムアートが表示されない
アルバムアートの URL に画像の URL を渡しているにも関わらず、画像が表示されない。
どうやら sizes
属性を指定しなければならないらしい。
navigator.mediaSession.metadata = new MediaMetadata({ title: '曲名 - アルバム名', artist: 'アーティスト名', artwork: [ { sizes: '412x412', src:' アルバムアートの URL' } ] });
artwork
には type
も指定できるが、こっちは不要らしい。
まとめ
Global Media Controls 個人的にはかなりアリなので、普及して欲しい。