0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

ChromeでMediaSessionAPIを使う

Last updated at Posted at 2019-09-08

そもそもMediaSessionとは?

皆さんはWindows10等を使っていますでしょうか?
Grooveミュージックなどで再生するとロック画面や音量変更時に隣に出てくるアイツの様なやつです。
なお、ChromeでYouTubeを使用すると出てきます。
こんなやつです↓
image.png
今回は、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(); //再生
}

出来ました!!
image.png

注意点

アートワークのソースは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(?)からのメディアコントロール画面(?)ではアルバム名もそのまま表示されるので長すぎても良くないと思います。

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?