PWAで新しいMediaSessionAPIを使用する

メディア体験を向上させる

このウェブアプリを英語またはドイツ語のロケールで使用している場合は、記事の上部に音声再生ボタンが表示されます。ボタンをクリックすると、書かれたテキストの読み上げ音声トラックが開始されます。何も変更しなくても、これは非常にうまく機能しますが、私はそれを改善できると思いました。

より多くのデータと再生コントロールを提供するために、「メディアセッションAPI」と呼ばれるプログレッシブウェブアプリで利用可能な新しいAPIを使用できるようになりました。ブラウザがそれをサポートしている場合、アプリケーションはメディアエクスペリエンスを大幅に向上させることができます。

アルバムアートワークを提供する
タイトル、アルバム名、アーティスト名など、オーディオトラックに関する詳細情報を提供します
ユーザーがWebアプリの外部でオーディオトラックの一部を一時停止またはスキップできるように、再生コントロールを提供します

簡単に言うと、簡単に

「MediaSessionAPI」の実装は非常に簡単で、数行のコードしか必要としません。

function setMediaSessionMetaData(props){
  // Progressive enhancement of your PWA,
  // which means we have to check if the
  // new API is available.
  if(!('mediaSession' in navigator)){
    return;
  }
  
  navigator.mediaSession.metadata = new MediaMetadata({
    title: props.title,
    artist: props.artist
    album: props.album,
    artwork: props.artwork
  });
  
  // Add action handlers, if any.
  // For a complete list, check out the
  // MDN-link in the addendum.
  if(props.play){
    navigator.mediaSession.setActionHandler('play', function() { /* Code excerpted. */ });
  }
}

// ... Later in your code ...

setMediaSessionMetaData({
  title: "Song name",
  artist: "Artist name",
  album: "Album name",
  artwork: [{ 
    src: 'https://dummyimage.com/512x512',
    sizes: '512x512',
    type: 'image/png' }]
});

Typescriptを使用している場合は、NPMで利用可能な関連するタイプ定義を含むパッケージもあります。

変更が追加された後、Google ChromeなどのAPIをサポートするブラウザでオーディオトラックを再生することにより、実装を確認できます。すべてが正しく設定されている場合、Chromeのメディアウィンドウには、実装に応じて、提供された名前、アルバムアートワーク、およびコントロールが表示されます。

Image b313f068c476