ChromeでMediaSessionAPIを使う

9168 ワード
HTML Chrome WebAPI JavaScript HTML テキストリンク

そもそもMediaSessionとは?

皆さんはWindows10等を使っていますでしょうか？
Grooveミュージックなどで再生するとロック画面や音量変更時に隣に出てくるアイツの様なやつです。
なお、ChromeでYouTubeを使用すると出てきます。
こんなやつです↓

今回は、Chromeで実際にMediaSessionAPIを叩いていこうと思います。
対応状況として、現在は実験的な機能であり、PC版Chrome(73)、Android版Chrome(57)以降のみでしか対応していません。
詳しくはここから: https://developer.mozilla.org/ja/docs/Web/API/MediaSession

コード

index.html
<!DOCTYPE html>
<html>
    <head>
        <title>MediaSession TEST</title>
        <meta charset="UTF-8">
        <script src="test.js" charset="UTF-8"></script>
    </head>
    <body>
        <audio id="player" src="" controls></audio>
        <button id="play" onclick="test()" >再生</button>
    </body>
</html>
test.js
function test(){
    var audio = document.querySelector("#player"); 
    audio.src = "test.mp3"; //任意の音源データ選択
    if ('mediaSession' in navigator){
        navigator.mediaSession.metadata = new MediaMetadata({
            title: "てすと", //音声のタイトル
            artist: "MediaSession", //　アーティスト
            album: "てすと", //アルバム名 (Chrome79から別機能でアルバム名も表示されるようになったので忘れないように!)
            artwork: [{ src: "https://dummyimage.com/600x600/1ea845/000000.png",  sizes: '540x540',   type: 'image/jpeg' }] //アートワーク(推奨500px以上、サイズやタイプ指定が無ければ表示されない?)
        });
        navigator.mediaSession.setActionHandler('play', function() {audio.play();}); //再生ボタン押下時の動作
        navigator.mediaSession.setActionHandler('pause', function() {audio.pause();}); //一時停止ボタン押下時の動作
        //navigator.mediaSession.setActionHandler('seekbackward', function() {}); //後ろにシークした時の動作(?)
        //navigator.mediaSession.setActionHandler('seekforward', function() {}); //前にシークした時の動作(?)
        navigator.mediaSession.setActionHandler('previoustrack', function() {}); //前ボタン押下時の動作(今回は未使用)
        navigator.mediaSession.setActionHandler('nexttrack', function() {}); //次ボタン押下時の動作(今回は未使用)
    }
    audio.play(); //再生
}

出来ました!!

注意点

アートワークのソースはhttp,https,data,blobのみ使えます。
MDNの例( https://developer.mozilla.org/ja/docs/Web/API/MediaSession )ではアートワークの部分が以下の様に
なっていますが、ソースの他に、サイズやファイルタイプ等を入力しなければいけない事が分かりました。
修正前

artwork: [{src: "podcast.jpg"}]

修正後

artwork: [{ src: "https://dummyimage.com/600x600/1ea845/000000.png",  sizes: '540x540',   type: 'image/jpeg' }]

参考にした所

変更

2019/09/08 タイトルに誤字があったので修正しました。
2020/01/09 サンプルコード(JS側)のアルバム部分にコメント追加。
Chrome79(?)からのメディアコントロール画面(?)ではアルバム名もそのまま表示されるので長すぎても良くないと思います。