Just a fun little project to show some pretty colours and the currently playing track using the Spotify API. A nice screen saver to have up at a party or while studying.
⚠: The codebase is a little gross!
The app polls the Spotify user's player state using this endpoint to get the currently playing track. We then get the relevant album art for the track, and extract the main colours from it using node-vibrant. These are the colours that you see in the visualisation.
To differentiate between sections of the song, we call the audio-analysis endpoint on the Spotify API (here). We are currently just using deltas of the sections to calculate the mean loudness of the track and toggling background colour states.
There is scope to further enhance this feature by doing your own analysis of the beats or tatums to extract the choruses from the data. Might be a fun weekend project I'll get to doing eventually.
The project has been designed to be hosted on Vercel. To run locally, install the Vercel CLI and run vercel dev.
You'll need to create a Spotify developer project and copy the following parameters into your .env.
- SPOTIFY_CLIENT_SECRET="xxxxx"
- SPOTIFY_CLIENT_ID="xxxxxx"
- HOST_URL="YOUR HOST BASE URL eg. now-playing.kal.im"
This project was bootstrapped with Create React App.