Project Kara #1: Introduction

Dec 1, 2015   #Post-mortem  #Karaoke  #Mobile 

I made a karaoke system to entertain my friends and learn Aurelia, a Javascript framework for creating single-page web applications. This series of blog posts will give an overview of the project, its design and implementation.

Project background

The system is a recreation of one written by a friend after he returned from an extended stay in Japan. It aims to provide the same amazing experience found at the karaoke boxes of Tokyo, Seoul and your local Chinatown.

Unlike most Western karaoke places, where there is a stage in the corner of a pub, and where you add yourself to a list of singers at the bar, these provide a private experience for groups of friends or coworkers. Typically, you get a private room with a television, a pair of microphones and tablet-like devices for browsing and ordering songs. These allow you to:

  • Browse a song library by category or genre
  • Search for songs by title or artist name
  • Add songs to the playback queue (either in open or secret)
  • Skip or restart the current song (when you realize that nobody knows how it goes)
  • Adjust playback speed and pitch
  • Get scored based on your performance (more common in Korea than Japan)

These old photos from Tokyo give a general impression of the setup: The “tablet” can be seen on the one to the left (for some reason they also had paper-based song catalogs even though the system had a comprehensive library function). The photo on the right shows the television and speaker setup.

Photos from a Karaoke box in Asakusa, Tokyo, in 2009

My friend was able to recreate this perfectly, and ended up with a great setup in his dorm that gave us many nights of singing our hearts out. These days we live in different towns, and I wanted to set up something similar here for a group of friends who like singing. Unfortunately, his solution requires fairly specific pieces of hardware and Linux applications. I wanted something that could run on a regular Windows 10 tablet, and that would allow users to use their own phones to control playback.

When my employer asked me to get familiar with the Aurelia web framework, a karaoke system felt like a good, clearly delimited hobby project.

Project goals

My goal for the project was to cover the functionality outlined above, within these technical constraints:

  • The system should run on a regular Windows tablet and require no specific hardware (apart from microphones and HDMI out)
  • Everything should work without internet access (meaning local song library)
  • Singers should be able to use any recent mobile or tablet as “client”

And the following functional ones:

  • It shouldn’t take more than half a minute to get a device hooked up as client
  • The user interface should be as “transparent” and easy to use as possible
  • The system should have a minimal mechanism for tracking “song owners”
  • All connected clients should show up-to-date system status at any times

Finally, the system components should be open source under a Libre software license.

Project outcome

After a week of evening hacking, I ended up with a stable solution that covered most points, and worked smoothly. The photo below shows an outdated version of the client user interface, running on my spare Android phone:

Non-final version of kara-app showing library browser

The setup itself is composed of two primary parts that can be found on my Github page:

  • An HTML5 app for requesting songs/controlling playback.
  • An OWIN server program for hosting the app; managing the song library/playback queue and controlling an mplayer instance running in slave mode.

It has been tested (on real people), and found to be rock solid (apart from some minor client hiccups). The specifics of the system will be the subject of the following upcoming blog posts:

  • Project Kara #2: Architecture and server implementation
  • Project Kara #3: Client app overview and Aurelia experiences
  • Project Kara #4: Lessons learned and way forward