Slide 1

Slide 1 text

Spotify物理リモコンがほしい v0.2 田中みそ 2022/5/26 Music LT Vol. 2

Slide 2

Slide 2 text

自己紹介 田中 みそ (田中 大樹) Qiita: miso_develop Twitter: miso_develop Facebook: 田中みそ  Music LT主催  LINE API Expert  IoT界隈やスマートスピーカー界隈に よくいます

Slide 3

Slide 3 text

Spotify物理リモコンがほしい背景 • 普段スマートスピーカーからSpotifyで音楽を流すけど、 曲選択や音量調整といった操作は音声ではやりづらい • なのでWeb Playerを使ってPCから操作してるけど、 PCのあるところに行かないといけなかったり、 ウインドウ切り替えたりと地味にめんどくさい

Slide 4

Slide 4 text

コンポのリモコンみたいなので操作したい 理想はコンポ(死語?)のリモコン感覚で物理ボタンを ポチポチしてSpotifyをコントロールできたらいいな

Slide 5

Slide 5 text

(余談)こんなのもあるらしい https://www.itmedia.co.jp/news/articles/2202/23/news041.html より

Slide 6

Slide 6 text

ソフトウェア実装

Slide 7

Slide 7 text

Spotify Web API https://developer.spotify.com/documentation/web-api/reference/#/operations/transfer-a-users-playback より

Slide 8

Slide 8 text

Spotify Web API • シンプルなREST API • Spotify for Developersにログインするとプロジェクト (APP)を作成でき、Client ID/Secretが発行される • 曲情報やアルバム情報取得APIなんかがあり、 Player APIも一通り揃ってる • ただし無料プランだとPlayer APIは動かない…

Slide 9

Slide 9 text

(余談)初回3ヶ月無料キャンペーン中! https://www.spotifypremium.jp/ より

Slide 10

Slide 10 text

Web Consoleがとても便利 https://developer.spotify.com/console/get-user-player/?market=ES&additional_types= より

Slide 11

Slide 11 text

Web Consoleがとても便利 https://developer.spotify.com/console/get-user-player/?market=ES&additional_types= より

Slide 12

Slide 12 text

Web Consoleがとても便利 https://developer.spotify.com/documentation/general/guides/authorization/code-flow/ より

Slide 13

Slide 13 text

Use Caseに合わせたクラスを作成 Use Case • 再生/停止 • 次の曲へ • 前の曲へ • 音量アップ • 音量ダウン • リピート • シャッフル https://github.com/thelinmichael/spotify-web-api-node より

Slide 14

Slide 14 text

ハードウェア実装

Slide 15

Slide 15 text

物理コントローラーどうするか • ひとまずM5Stackでプロトタイプ実装 • 3ボタンあるので組み合わせでUse Caseは網羅できる • 前の曲へ A • 再生/停止 B • 次の曲へ C • 音量ダウン A B • 音量アップ B C • リピート A C • シャッフル A B C

Slide 16

Slide 16 text

物理コントローラーどうするか

Slide 17

Slide 17 text

プロトタイプのシステム構成 Web API JavaScriptでマイコンを制御できるIoTフレームワーク。 M5Stackから直接Web API叩けるけど、Cで実装し たくなかったのでopnizを使ってTypeScriptで実装。 ボタン信号

Slide 18

Slide 18 text

本番構成 マイコン: M5ATOM or M5Stamp ソフトウェア実装:Spotify Web API & opniz 物理ボタン:どうしよう… https://www.switch-science.com/catalog/7360/ より

Slide 19

Slide 19 text

物理ボタン案その1 • 4x3キーパッド作成キット • 350円 • 小さすぎるかも? https://akizukidenshi.com/catalog/g/gK-12229/ より

Slide 20

Slide 20 text

物理ボタン案その2 • 100均のUSBテンキーボード • 330円! https://note.com/tomorrow56/n/n9e9a02586d76 より https://lang-ship.com/blog/work/usb-numeric-keypad/ より

Slide 21

Slide 21 text

物理ボタン案その3 • 謎の赤外線リモコン • 多分昔買った電子パーツ詰め合わ せみたいのについてきたやつ • ボタンいっぱいあるし最適解かも

Slide 22

Slide 22 text

物理ボタン案その3 https://lang-ship.com/blog/work/m5sitckc-daiso-remote-led/ より https://akizukidenshi.com/catalog/g/gM-07245/ より