Tweet
Tweet

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

物理ボタン案その１ • 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/ より