Spotify カバー写真/タイトル表示 と次の曲へスキップ

Spotify で、現在再生中の曲のカバー写真とタイトルがでるものを作りました。
リスト再生時は、画面を押すと次の曲にスキップします。
画面表示は、IMUを使って自動回転します。

動画

開発素材

API

Spotify

M5AtomS3

ツール

Arduino IDE

システム構成

主な役割と処理

Spotify

• WebAPI を使用します

M5AtomS3

• 今回のメインで、WiFi/Internetに接続し、定期的にSpotifyの再生状態を取得します
• 再生状態が変化したら、カバー画像をリサイズトリミングするための処理に送信します
• 曲のタイトルとアーティスト名を流れる表示で画面へ出力します
• タイトルとアーティスト表示が終わったら、カバー画像を画面に出力します
• 画面が押される（ボタンとして押される）とリスト再生中の場合、次の曲に変更されます 　・変更されたあとすぐに曲の状態を取得して表示します（カバー画像も表示します）
• 表示の際には内蔵のIMUを使い上下左右を判定していますので向きを気にせずに使えます
• 曲が再生されていない場合は、液晶の表示をオフにしバックライトも消しておきます（焼付き防止）
• 画面を長押しすると再度曲名とカバー画像を表示します

レンタルサーバ

• M5AtomS3だけでjpgのリサイズとトリミングが重たいので、外部で処理しています。
• この処理にはImageMagickを使っています。

メモ : spotify の WebAPI を使用するにあたり事前にtokenを得ておいて、tokenが期限切れになったら更新して使うようにしています。

http接続は、以下のコードを使わせて頂いています（ありがとうございます） https://qiita.com/poruruba/items/82a683866aef872665a4

---

For English

Spotify

• Uses WebAPI.

M5AtomS3

• Connects to the internet to monitor Spotify's playback status.
• Changes songs and displays song information and cover images on screen.
• Adjusts display orientation with a built-in sensor and powers down the display when not in use to prevent burn-in.

Rental Server

• Manages heavy image processing tasks using ImageMagick.

Note: Manages authentication with Spotify via tokens that are regularly refreshed.

ストーリー

作品の特徴

M5AtomS3を初めて購入して小さいながらパワフルで、キレイな液晶表示ができるので、これを活かしつつ日中spotifyをリスト再生しているので、スマートフォンやPCを使わずにカバー写真や曲名/アーティストを確認したいと思って作りました。

GoogleAssistant(NestHub)やAmazonAlexa(Echo)などで音声コマンドで再生したものが、ミニディスプレイとして、画面に小さく表示されるのでとてもお気に入りです。

友人が３Dプリンタで、マウンタを作ってくれたので、車でも利用しています。 スマートフォンなどを運転中に操作するのは危ないので、画面を押すだけで次の曲にスキップできるのは、とても便利です。

---

技術的こだわり

小気味よく動作することと、流れる文字に違和感がないことやIMUを使った表示向きの制御など、小さいマイコンでできることをなるべくシンプルに詰め込んでみました。

最初表示がものすごく遅かったのですが、スプライトを活用するや処理を見直して、満足のいくサクサク感が出せていると思います。

M5unified を使っていますが、M5AtomS3ではIMUの処理においてCoreなどで実装されている処理が、ないものもありいくつかは自作して上下左右を判定するようにしています。

---

For English

Features of the Work

I purchased the M5AtomS3 for the first time, and despite its small size, it’s powerful and can display beautiful LCD graphics. Taking advantage of this, I created this project to check album covers, song titles, and artists during the day when I’m playing Spotify lists without using my smartphone or PC.

When playing music with voice commands via Google Assistant (Nest Hub) or Amazon Alexa (Echo), the information is displayed on a mini display screen, which I find very convenient.

A friend made a mount for me with a 3D printer, so I can use it in my car. Since it's dangerous to operate a smartphone while driving, being able to skip to the next song just by pressing the screen is extremely handy.

---

Technical Details

I focused on making it run smoothly, ensuring the scrolling text doesn’t look awkward, and controlling the display orientation using the IMU, packing as much functionality as possible into a small microcontroller in a simple manner.

Initially, the display was extremely slow, but by utilizing sprites and reviewing the processing, I believe I’ve achieved a satisfying level of responsiveness.

While using M5unified, I found that some processing implemented in Core for IMU handling was missing on the M5AtomS3. Therefore, I created some of the necessary processes myself to determine the orientation in all directions.

メンバー

• 

  KOBAYASHI Jun @kobayashi_jun

  • 企画/設計/開発

関連イベント

• M5Stack Japan Creativity Contest 20242024-06-01 開催

同じニオイがする作品

• RumiCar-C3
• M5Stack ATOM Matrixを使ったクワッドコプター(ドローン)
• Photo Sensor Indicator
• キャンプ感あふれるお天気グッズ「CAMP-CAN」by M5StickC PLus