Song Analysis

Take a deeper look into the song you’re listening to

CLIENT

Personal project

TYPE

Front-end Development

UI Design

TOOLS USED

Spotify API

React.js

SCSS

TIMELINE

October 2019 - May 2020

Problem Definition

As a guitarist, I often found myself googling the key of the song I was currently listening to so I could play along with it. While Spotify does have a lot of useful information for musicians through their API, it is not accessible through their web client or app.

Product Goal

I wanted to create a web app that displays useful musical information about a song including its key and BPM. I wanted it to integrate with my Spotify account and update with the song in a simple colourful UI.

Constaints

  • Musical information from the API comes from Spotify’s estimations, not the artist themself.
  • The Spotify API has rate limiting to share resources equally across all users. It is important to use endpoints that fetch multiple entries to reduce the amount of requests.

Assumptions

  • The user has a Spoitfy account.
  • The user agrees to allow “Song Analysis” to access their Spotify account through a secure token.

Conclusion

I created a web app that allows me see additional information about the song I’m listening to including the song’s key, BPM, date it was released and a short bio about the artist from Wikipedia. The colour of the UI also reflects the colour prominent colours in each song’s album art.