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


    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