Spotify Lyrics

Detects the song you are currently playing on Spotify and shows the lyrics for it!

View source code on GitHub

Date of Completion

April 30, 2020 - Present

JavaScript React Spotify

Introducing Spotify Lyrics

Spotify Lyrics is an online web application that serves up the lyrics for the song you are actively listening to on Spotify.

Spotify Lyrics Login Screen

Background

Spotify is a great platform for listening to music. Recently the mobile version of Spotify enabled the ability to show the lyrics for the actively playing song.

But it looks like the official Spotify web app is missing this simple but useful feature. This is why I have create Spotify Lyrics.

Spotify Lyrics Animated Video

What Spotify Lyrics Isn't

From the get-go, Spotify Lyrics is not a Spotify clone. It does a very simple task of serving up the lyrics for a given song that you are playing on Spotify 🤹‍.

So that means you are still required to use either the official Spotify mobile or web app to control what's being played.

Development Process

I got the project up and running using Create-React-App, a relatively easy way to start up any React-based project.

The project is split into two sides: (1) front end and (2) back end.

Front End

Spotify Lyrics is built using React.js and relies on Axios for fetching data.

Back End

To resolve the Cross-Origin Resource Sharing (CORS), Express.js comes into play as our mini backend server.

It's only function is to create a portal for our front-end to call to and retrieve the content that makes Spotify Lyrics useful: lyrics!

The ability to fetch and display lyrics is possible thanks to Cheerio, a markup parser with super awesome APIs, and Genius, a music knowledge platform.

Going Forward

I am considering creating a Chrome Extension that will offer the same functionality but will provide so much more room for portability.