Taylor Simpson

Song Analysis

Web App

Github

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

YEAR

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.

Constraints

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.