np-cover-1

Now Playing — a Spotify visualiser that changes colours with the album art.

Tech

CRA
Spotify API
Node Vibrant

 

Concept
I’ve always found visualising music fascinating. So I spent a few days creating Now Playing. a screen saver to have up on a big screen at a party, or up on your laptop while you study.

The app itself was a little experiment based off an idea I had while lying on the carpet at a friends house blasting away our Spotify tunes. After working with colour extraction libraries for musictaste, I wondered whether it would be nice to visualise the currently playing track with some pretty colours and just watch as they morph and change between tracks.

Taking this further, I discovered Spotify’s audio analysis endpoint, which returns a bunch of cool information about any track, including to the millisecond-level timing of beats, bars and most interestingly, sections.  Their API docs define a section as follows:

Sections are defined by large variations in rhythm or timbre, e.g. chorus, verse, bridge, guitar solo, etc. Each section contains its own descriptions of tempo, key, mode, time_signature, and loudness.

Using this data, along with some loudness metrics, Now Playing attempts to figure out when choruses occur, and switch out the colours in the background with bright ones that pop. Tie that in with smooth animations announcing the track title and artist, and we have a simple yet beautiful visualiser. I hope you enjoy it 💝.

 

 

 

test