Internet usage has reached unprecedented levels over the quarantine, yet many of us remain extremely bored and unmotivated. Wouldn’t it be great to just enjoy ourselves? Music can be a powerful form of stress relief. Let’s take music playing to the next level.

We wanted to create a project that helps users discover new and relevant songs. Think back to the Discord bots that can play music using YouTube APIs. Now, what if we could magically find songs that perfectly matched the current vibe? Let’s make an extension that’s capable of playing songs which match your current webpage.

What it does

WikiTunes is an easy-to-install browser extension that generates a playlist of songs based on the contents of your current webpage. It queues the playlist into your Spotify player (web player or desktop app) and it doubles as a Spotify music controller.

  1. Click the big green generate button and the extension will begin generating your songs.
  2. It scrapes the text from the current active tab. It processes this text by removing stop words and counting word frequencies in order to obtain a search string of a few keywords.
  3. It searches for songs with relevant track names or lyrics in
  4. The resulting songs are then added into your current Spotify queue using the Spotify Developer API.
  5. You can use the buttons in the extension to play/pause and navigate between songs.

How we built it

We created the browser extension using Google Chrome’s extension developer documentation. Using javascript, we scrape the data from the current webpage and apply an algorithm based on counting word frequencies and eliminating stop words. We then use the processed data and query for songs using Next, the Spotify API is used to play the playlist of songs automatically. For detailed implementation, check out our Github.

Challenges we ran into

The initial setup of the browser extension was slow since everything was new and it required a lot of examining the documentation to figure out. Teamwork was particularly helpful when facing this challenge as having multiple perspectives was beneficial in identifying the erroneous areas of code.

Another difficulty was when we were implementing the algorithm for processing the scraped data. We determined the word with the highest frequency while omitting stop words, but we still had to determine the balance between finding too many results and too little.

It was also difficult to fit our data to the shape required of the Spotify API; the endpoints required particular fields that needed to be specifically fetched. We typically refer to songs by their name and artist. However, in order to use the Spotify API, we require track IDs that must be individually fetched from a specific Spotify API endpoint. This means that the action of generating and queueing a list of songs into Spotify requires a plethora of API calls.

Another challenge with the Spotify API was the authentication. There are various authorization flows, each with their own challenges to set up. We ultimately settled on using the /authorize endpoint with OAuth2.0. Additionally, we had to investigate the various permission scopes and determine which scope is secure and sufficient for each API call.

Accomplishments that we're proud of

We are proud that we were able to create a working product in the span of 14 hours. We chose to create something (an extension) that no team member had any prior experience with and so we were all tackling new technologies. We had to rely heavily on documentation provided online and do lots of reading.

What we learned

From a technical perspective, this experience taught us to make a browser extension and how to use the Spotify developer API. We also learned how to adapt to working with peers virtually, particularly while debugging code and recording the presentation video.

What's next for WikiTunes

The next step for WikiTunes is to incorporate machine learning to improve playlist generation. By using information from song reviews, user feedback, sentiment analysis and other existing playlists, we can greatly improve the resulting playlist so that they are especially compatible with the users web page content.

Since WikiTunes is all about improving the user experience of listening to music, we can consider improving the cosmetics of our extension. We could add evening (and other) themes to help set the mood. We can also add more customization for the playlists themselves such as playlist length and more.

Share this project: