Memeoke: Karaoke + Memes

Concept

Memeoke is a web-based application which simulates the offline karaoke experience by allowing users to sing their favorite songs online while infusing it with a contemporary twist by serving up memes and animated GIFs in the background that are contextually related to the song being sung. Users can also share their experience through the generation of a shortened URL which will lead other users directly to the song page on the Memeoke website, without having to navigate through the menus to get there.

I worked with three School of Information classmates, Anubhav Gupta, Sindhuja Jeyabal, and Carlos Miguel Lasa, on Memeoke for our final project submission for INFO 253: Web Architecture.

Project Challenge

The impetus for this project was the creation of a URL-shortening service that effectively emulated how existing URL shorteners such as Bit.ly currently work. Our team decided to go in a different direction though, as we felt that there could be so much more than URL-shortening in our application. We all agreed that URL-shortening is a great way to share creative content generated by users across the Internet, and one of the manifestations of this creativity has been the preponderance of memes and animated GIFs of trending topics in popular culture.

Following this train of thought, our team believed that creating a mash-up of these memes together with some form of audio, would be a great way to expand the entertainment factor of these animated GIFs and increase their virality, which would in turn make sense for URL-shortening to step into the picture to make the mash-up easily shareable. The natural by-product of our brainstorming around this area led to the idea of an application that combined memes with popular music, and Memeoke was born.

Features

To implement the meme-karaoke mash-up, the following shows the breakdown of features that were initially proposed and what were eventually implemented in the application:

  • We offer the user a curated list of popular artists to choose from, after which we generate a list of recent songs for each artist (for which both audio and lyrics exist) that the user can select to sing.
  • Once a song is selected, lyrics are sourced from the Musixmatch API which returns them in JSON format. Not all lyrics are returned, and there are also no timings for the lyrics due to limitations imposed by the free Musixmatch service. A “demo” feature was created to illustrate how the service would have looked like with timed lyrics.
  • Memes shown are based on the name of the artist chosen (as the Musixmatch API only returns a fraction of the lyrics) and are sourced from the Giphy API. Only the first 20 memes are taken by the application.
  • Memes are displayed 5 seconds at a time. Sound pitch variance was not implemented.
  • The recording feature was not implemented due to limitations of the APIs used. The URL-shortening service can still be used to share the meme-karaoke mash-up though.

Technical Details

  • Front-End: HTML, CSS, JavaScript, and the Bootstrap responsive framework
  • Back-End: Python Flask, SQLite
  • APIs: Musixmatch API, Giphy API, SoundCloud API

View Final Presentation

Synced Lyrics Demo Using LRC Files


"Select an Artist" Interface


"Song Playing" Interface