Something similar to the Spotify Car Thing, built with a cheap ESP32 Screen. Connects to your Spotify account and displays your currently playing song with its album art
This project is a Work in Progress!
If you enjoy my work, please consider becoming a Github sponsor!
This project is designed to make use of basically ready to go hardware, so is very easy to get up and running
Currently this project runs on two types of hardware:
An ESP32 With Built in 320x240 LCD with Touch Screen (ESP32-2432S028R), buy from wherever works out cheapest for you:
It's built to work with the ESP32 Trinity, an open source board I created for controlling Hub75 Matrix panels, but it will does work with any ESP32 that breaks out enough pins.
The display it uses is a 64x64 HUB75 Matrix Panel.
All the parts can be purchased from Makerfabs.com:
- ESP32 Trinity
- 64 x 64 Matrix Panel
- Optional: 5V Power Supply - You can alternatively use a USB-C power supply
* = Affilate Link
I've tried to design this project to be modular and have abstracted the display code behind an interface, so it should be pretty easy to get it up and running with a different type of display.
One of the coolest parts about this project, in my opinion at least, is the ability to connect an NFC reader to control what songs/albums/playlists are being played.
You can write the spotify URI or URL of the song, album or playlist to an NFC tag and when you swipe it off the reader, the device will tell your spotify account to play what it reads.
If you aren't interested in this feature, you can just not connect it and the device will work without it.
This code has been tested with these red PN532 NFC readers and cheap NFC stickers.
To use the PN532 as an SPI device, you need to configure the toggle switches so switch 1 is down and 2 is up. (You may need to remove the sticker on top of it)
The CYD does not have enough free pins to use an SPI device by default, and the NFC reader is quite slow over i2c, so we need to get creative.
With the help of an "SD Card Sniffer", we can make use of the Micro SD slot of the CYD to connect the NFC reader to.
| Sniffer Board Label | ESP32 Pin | PN532 NFC |
|---|---|---|
| DAT2 | - | - |
| CD | IO5 | CS |
| CMD | IO23 | DI / MOSI |
| GND | GND | GND |
| VCC | 3.3V | VCC |
| CLK | IO18 | SCLK |
| DAT0 | IO19 | DO / MISO |
| DAT1 | - | - |
Again, it is designed for the ESP32 Trinity, but can work with any ESP32 that breaks out the required pins.
The Trinity has some pins broken out that can be used for this purpose
| ESP32 Pin | PN532 NFC |
|---|---|
| IO22 (SCL) | CS |
| IO21 (SDA) | DI / MOSI |
| GND | GND |
| 3.3V | VCC |
| IO33 | SCLK |
| IO32 | DO / MISO |
These steps only need to be run once.
In order to use this project, you will need to create an application on the Spotify Developer Dashboard
- Sign into the Spotify Developer page
- Create a new application. (name it whatever you want). There is a section fo "callback URI" you can just make this "locahost" for now.
- You will need the "client ID" and "client secret" from this page later in the steps
You will need to add a callback URI for authentication process by clicking "Edit Settings", what URI to use will be displayed on screen in a later step.
Flash the project directly from your browser here (Chrome & Edge only)
or
Jump to the "code" section below
The device is now flashed with the code, but it doesn't know what your Wifi or Spotify details are.
In order to enter your wifi details, the project will host it's own wifi network. Connect to it using your phone.
- SSID: SpotifyDiy
- Password: thing123
You should be automatically redirected to the config page.
- Click Config
- Enter your WIfi details (2.4Ghz only)
- Enter the client Id and client secret from the earlier step
- You can leave refresh token blank
- Click save
Note: If you ever need to get back into this config section, click reset button (the button closest to the side) twice.
The final step is to connect this device to your Spotify account. When the Wifi is configured correctly, it will enter "Refresh Token Mode".
- Your device will now be connected to the Wifi details you gave it.
- Go to the address displayed on screen using your phone or PC that is connected to the same network as your device.
- On the webpage that loads there will be an address displayed in bold, add this to the callback URI section as mentioned in the Spotify API section
- Click the
Spotify AuthURL - You will need to give permission to the app you created to have access to your spotify account
Your project should now be setup and will start displaying your currently playing music!
If you want to program this project manually, there are two options
PlatformIO is the easiest way to code this project.
In the platformio.ini, there are several environments defined for the different boards
| Environment | Description |
|---|---|
| env:cyd | For the Cheap Yellow Display |
| env:cyd2usb | For the Cheap Yellow Display with two USB ports |
| env:trinity | For the ESP32 Trinity (or generic ESP32 wired to the matrix panel the same) |
When you select the environment, it will automatically install the right libraries and set the configurations in the code.
If you want to use the Arduino IDE, you will need to do the following to get it working
The following libraries need to be installed for this project to work:
| Library Name/Link | Purpose | Library manager |
|---|---|---|
| SpotifyArduino | For interacting with Spotify API | No |
| ArduinoJson | Dependancy of the Spotify API | Yes ("Arduino Json") |
| JPEGDEC | For decoding the album art images | Yes ("JPEGDEC") |
| WifiManager - By Tzapu | Captive portal for configuring the WiFi | Yes ("WifiManager") |
| ESP_DoubleResetDetector | Detecting double pressing the reset button | Yes ("ESP_DoubleResetDetector") |
| Seeed_Arduino_NFC | For the NFC reader | No (it's a modified version) |
| Library Name/Link | Purpose | Library manager |
|---|---|---|
| TFT_eSPI | For controlling the LCD Display | Yes ("tft_espi") |
| Library Name/Link | Purpose | Library manager |
|---|---|---|
| ESP32-HUB75-MatrixPanel-I2S-DMA | For controlling the LED Matrix | Yes ("ESP32 MATRIX DMA") |
| Adafruit GFX library | Dependency of the Matrix library | Yes ("Adafruit GFX") |
The CYD version of the project makes use of TFT_eSPI library by Bodmer.
TFT_eSPI is configured using a "User_Setup.h" file in the library folder, you will need to replace this file with the one in the DisplayConfig folder of this repo.
At the top of the SpotifyDiyThing.ino file, there is a section labeled "Display Type", follow the instructions there for how to enable the different displays.
Note: By default it will use the Cheap Yellow Display