How to Show Lyrics When Playing Spotify

I’ll make an exception. Most sites would write a very long article first and add a ‘TL;DR’ heading followed a summary at the end. But for this post, it’ll be the first thing you’ll read right after this sentence.

TL;DR

Get instant song lyrics via my web app while Spotify is playing on your phone or browser. You can find it here: https://spotify-with-lyrics.herokuapp.com

Login first, then go to your Spotify app and play any song or playlist. While it’s playing, go back to my site and you’ll see that the lyrics will start showing up on the right.

WHAT I DID

I’m not a good singer and I occasionally sing the wrong lyrics of whatever song I’m playing. So I started to ponder on how to solve this problem, not my singing of course (which I know no programming language can fix), but the words that I spurt out from my mouth. That’s when I decided that I would create a web application that syncs with my Spotify app, and on any device (desktop, phone, or even on your TV). In my web application, it will display different types of data such as the album art, song title, artist, and the most important one, the lyrics. All of these are pulled in real-time from Spotify and as the app gathers the song data, it will also search for the lyrics.

Now that you can sing along with your song, you now only need to fix your voice 😛

DETAILS FOR NERDS

I was looking into Spotify’s API and found that they had this very well-documented in their docs. So I registered an app there and got my credentials. Luckily, they had a working boiler template hosted in Github. What did I do next? Well like most developers there, I simply cloned it. This next step was fairly easy, I got the correct access tokens and scope then scraped the web for the song lyrics to display it in the app. In addition, I also added the PLAY, PAUSE, NEXT and PREVIOUS buttons for playlist control. Basically it’s a simple app that gets the lyrics in real-time.

For anyone trying to build their own Spotify app too, lets dive in deeper…

Everything you need to know can be found here: https://developer.spotify.com/

First step is to acquire a set of credentials by registering your own app. Next is clone the code example with OAuth on Github which is provided there. Then you do a little bit of coding, basically the repo on Github is using NodeJS.

Install Node JS, install the package dependencies with npm install and run it on your computer. Next is just understanding how everything works. It uses the Express router to get the tokens and other data.

Then what I did was call the API function.

GET https://api.spotify.com/v1/me/player/currently-playing

With the correct Access token. then get the current song playing and scrape the web with lyrics. You can do this with some libraries or go to MusixMatch, a lyrics wiki, or any website that provides lyrics and scrape the whole site for lyrics.

ISSUES

This is not intended for mobile. As soon as I get more feedback and traffic, then I will consider building it. Also some lyrics are not yet available especially songs in a different language.

Enjoy!

Leave a comment

avatar