Verse Lyrics

A simple Kotlin based Android application that helps users to fetch lyrics of songs played in Spotify automatically.

Why did I build this?

If you didn’t know, Spotify launched in India sometime in late February 2019. I wasn’t an avid music enjoyer like I am today so when I wanted songs, I sailed the high seas and downloaded a bunch of my favorites. It wasn’t all bad. No ads and no unexpected songs. But some people like my friend @kubic, who makes music, was using Spotify since long ago presumably using a VPN.

When it launched in India, I started using it on my phone for a few months and found myself googling the lyrics more often. It’s not big deal right? like, I’m barely spending a few seconds to type the song name and adding lyrics keyword so google returns the lyrics.

How does it work?

Well, I just explained it. What are required for getting a song’s lyrics?

• Song name
• Artist name (optional but helps narrow down the search)
• lyrics keyword

Remember, I’m doing this so I don’t have to type in the song name so we need to get the name of song that is played in spotify automatically with the least amount of effort.

Research

Now that we know what we want, have to find ways to get it. Where do we see song names and artist name? Notifications. This is more of a brute force way.

Fortunately, Spotify has a public API Android Media Notifications which uses Android’s BroadcastReceiver. You can use this to subscribe to what’s happening in Spotify. This is exactly what we need.

The API exposes these metadata:

We got the main and only ingredient. Now we need to find a way to get the lyrics. Like I said earlier, I just google the lyrics when I need them so why not do the same thing programmatically?

Implementation

In the very first version uploaded to playstore. All the logic was in a single file. Code quality who? It worked and I didn’t know any better since I didn’t follow any tutorial.

The logic was simple.

• Get the song name and artist name from the API
• Build a query string,
• Somehow get the HTML of the google search result page
• Parse the HTML to get the lyrics

id_link = "https://www.google.com/search?q=" + URLEncoder.encode(
            songname,
            "utf-8"
        ) + "+" + URLEncoder.encode(an, "utf-8") + "+" + "lyrics"

and you get something like this:

https://www.google.com/search?q=teeth+5+seconds+of+summer+lyrics

And there you have it

As you can see, all the lyrics are displayed in a <span> tag with the attribute [jsname='YS01Ge']. So all we have to do is parse the HTML and get the text inside the <span> tag with the attribute.

var ua = "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/78.0.3904.108 Safari/537.36"
Jsoup.connect(id_link).userAgent(ua).get().run {
  val elements: Elements = select("[jsname='YS01Ge']")
    //println(elements)
    if (elements.size != 0) {
        select("[jsname='YS01Ge']").forEachIndexed { index, element ->
            var el = element.toString()
            var line =
                el.replace(("<span jsname=" + '"' + "YS01Ge" + '"' + ">"), "")
            line = line.replace("</span>", "")
            runOnUiThread(fun() {
                if (line_count >= 0) {
                    lyrics.append(line)
                    lyrics.append("\n")
                    lyrics.append("\n")
                    lyrics_appended = true
                } else {
                    line_count++
                }
            })
        }
    }
}

This is a very rudimentary way of doing it but that’s all it required. Now all that is left is to show it in the app.

App design

I was not really a UI person but always had a knack for minimalism so that’s how my first app design was. A simple screen that has lyrics.

Pretty fancy for a first version right? But wait, what is the “Block ads” button doing over there?

Annoying ads

If you’ve spent anywhere near 3 minutes on Spotify, you would know how annoying their repeating ads are. I still can recite the ads by heart.

There were many open source apps that “blocked” ads or basically detect when ad is played and mute the phone and unmute when the ad is over. But they only had one function and why would I install someone’s app if I can make my own? So I did.

How does it work?

Simple. There are multiple ways to detect when an ad is played.

1. Using the Spotify API to note the length of the song, then if we don’t get a new intent from the broadcast receiver after the song length, we can assume that the song is an ad.

2. Or even simple(but prone to many issues) is reading the notification text and checking if it contains the word “ad”. This will break if the notifications are turned off.

I won’t go into the implementation here so if you want, you can check it out here.

Further development

When I first published it to playstore, I didn’t expect anyone to use it. I made it for my specific use case but why not publish it to playstore? I mean, you have to pay $25 to publish an app to playstore so I might as well make it worth it. I also posted about it on reddit and it kinda blew up.(I won’t share my reddit account here but the post got 355 upvotes and 73 comments and a shit ton of feedback). I would say that really boosted my app’s reputation in playstore.

Everyday, I would wake up and see the number of downloads increase by 10-15 and it was the ✨best✨ feeling. Like I’m just a student who made my first android app and people are downloading it?? Damnn.

Downloads were from all over the world. India, United States, Philippines, United Arab Emirates, Argentina, Australia, Aruba, Ghana, Italy, Nigeria, Pakistan, South Africa.

I actually didn’t care what most of the graphs means in the console dashboard. I just like looking at them going up and up.

Just look at it!

Testimonials

Every time I get a comment on playstore, It make my day. Like you install an app and you use it. You don’t have any obligation to leave a comment but you do. That’s just amazing. Obviously I’m going to share all of them here, why do you ask?

Positive or negative, I like all of them!

Other features

I also added a few other features that has been requested by users.

• Dark mode/ Light mode
• Auto scroll lyrics(although it’s not perfect)
• Better UI
• Font size change(4 sizes, grape, apple, mango, banana, pineapple, watermelon—inspired by reddit)
• All google fonts available
• Added Buy me a coffee button as requested by a user through email

Conclusion

This project started as one to solve my problems and along with it, it has been a great addition to my resume now that there are 1000+ downloads and 4.8 star rating on playstore. I’m probably done with this project as I don’t use android anymore and lyrics is added to Spotify in most countries now.