Media Session APIを使ってPWAの音楽プレイヤーを作る

2020年1月15日に行われたPWA Night vol.12で使用したスライドです。

スライド内のリンク

Music Player (demo)
https://music-player-demo.netlify.com/

: 埋め込み音声要素
https://developer.mozilla.org/ja/docs/Web/HTML/Element/audio

MediaSession API
https://developer.mozilla.org/ja/docs/Web/API/MediaSession

Can I Use
https://caniuse.com/#search=media%20session

ソースコード
https://github.com/KanDai/music-player

Transcript

1. 2020.01.15 @ PWA Night vol.12
 株式会社TAM 菅家大地
 Media Session APIを使って
 PWAの音楽プレイヤーを作る

2. 株式会社TAM フロントエンドエンジニア
 菅家 大地 / Daichi Kanke 元デザイナーのフロントエンドエンジニア
 福島→宮城→東京→宮城
 PWA Night / 仙台フロントエンドUG /v-sendai
 Vue.js / Nuxt.js / PWA / Monaca 
 daichi.kanke @kan_dai
3. 作ったもの紹介

4. https://music-player-demo.netlify.com/ Music Player (demo) Androidじゃないとうまく動かないかも…
5. https://developer.mozilla.org/ja/docs/Web/HTML/Element/audio
6. JavaScriptから操作できるので、 プレイヤーは割と簡単に作れる
7. https://developer.mozilla.org/ja/docs/Web/API/MediaSession
8. <audio>のみ Media Session APIを使用
9. https://caniuse.com/#search=media%20session
10. デモ

11. https://github.com/KanDai/music-player
12. 
 ご静聴ありがとうございました