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の音楽プレイヤーを作る

   

   View Slide

2. 株式会社TAM フロントエンドエンジニア

   菅家 大地 / Daichi Kanke
   元デザイナーのフロントエンドエンジニア

   福島→宮城→東京→宮城

   PWA Night / 仙台フロントエンドUG /v-sendai

   Vue.js / Nuxt.js / PWA / Monaca 

   daichi.kanke
   @kan_dai
   

   View Slide

3. 作ったもの紹介

   

   View Slide

4. https://music-player-demo.netlify.com/
   Music Player (demo)
   Androidじゃないとうまく動かないかも…
   

   View Slide

5. https://developer.mozilla.org/ja/docs/Web/HTML/Element/audio
   

   View Slide

6. JavaScriptから操作できるので、
   プレイヤーは割と簡単に作れる
   

   View Slide

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

   View Slide

8. のみ Media Session APIを使用
   

   View Slide

9. https://caniuse.com/#search=media%20session
   

   View Slide

10. デモ

    

    View Slide

11. https://github.com/KanDai/music-player
    

    View Slide

12. 

    ご静聴ありがとうございました

    

    

    View Slide