Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

Daichi
January 15, 2020

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

Daichi

January 15, 2020
Tweet

More Decks by Daichi

Other Decks in Technology

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. 
 ご静聴ありがとうございました