Inferhythm
Browser extension
Inferhythm is a browser extension that helps users find lyrics from the website Genius for the track they are currently listening to on Spotify.
Lyrics from Genius typically also have annotations and interpretations submitted by contributors, editors, musicians, and fans.
Links
Time Frame
September to October 2019
Languages and Tools
HTML, CSS, JavaScript, Git
Motivation
I wanted a convenient way to get lyrics for the track I am listening to like the experience found using Genius' Android app, but on desktop operating systems (Windows, macOS, Linux).
Contributions
- Research: I tried similar browser extensions to avoid remaking any.
- Design: I designed the user experience, user interface, and icon.
- Development: I wrote HTML, CSS, and JavaScript to present data from Spotify and Genius.
- Testing: I wrote tests with Jest, a JavaScript testing framework.
Challenge: Get Lyrics in One Click
I wrote HTML, CSS, and JavaScript to implement my design where the lyrics results pop up when the user clicks Inferhythm's button in the toolbar.
Manually Create Genius Page Links
To open the lyrics in a new tab, a valid link is required. I noticed that the structure of links to Genius pages were like genius.com/artist-name-track-title-lyrics, so I thought I could programmatically manipulate track data to match that structure.
Unfortunately, it was not very reliable because some artists had symbols in their names like a dollar sign which created invalid links because it was not consistently handled by Genius.
| Artist Name | Manually Create Link | Actual Genius Link |
|---|---|---|
| A$AP Rocky | asap-rocky | a-ap-rocky |
| Ty Dolla $ign | ty-dolla-sign | ty-dolla-sign |
This also happened for tracks that indicated features, remixes, or remasters in their title.
Get Links Directly from Genius
I looked for a solution by exploring the code of over 15 related GitHub repositories to see how they got a valid link. Some manually created links like I did, while others used Genius' search function.
I tried the search function and immediately saw better results since all the links worked.
Optimize Search Queries
However, one generalized search query did not always produce accurate results. I added another similar but more detailed search query, which improved the results.
Consequently, I merged the results of the two search queries.
Reflection
Measuring Success
Inferhythm was successful because it does what I designed it to do. I had to diverge from the design though by displaying a list of results first instead of directly going to the lyrics page because I was unable to consistently get the correct lyrics.
What I Learned:
- Writing tests: It would have been easier to write tests as I worked instead of all of them at once near the end of development. There is the added confidence knowing that the code works error-free.
- Cookies: I used cookies to keep the user's session, so they didn't have to re-login every time their browser reopens.
- Asynchronous programming: I made use of asynchronous programming when getting data from Spotify and Genius. It was helpful in performing actions in a specific order since some actions depend on others. Specifically, I made use of promises and their async/await syntax.
