Making It Play Music
How we put a jukebox into a pub, and your pocket
Over the past few months we’ve been working on a website for restaurateur Alan Yau’s latest venture — The Duck and Rice, a pub and restaurant recently opened in the heart of Soho, London. However this isn’t your typical pub website: its a digital jukebox, known as the Duckbox.
The Duck and Rice’s premises were once home to a much loved Soho pub, the Endurance. It too, had a jukebox, which locals remember well. The Duckbox is a contemporary interpretation of the pub jukebox. Guests can select from a list of songs, using their phones by visiting the pub website.
In this article I’m going explain our design decisions, the underlying infrastructure and share some technical details.
Our Objective
Before we started we wondered whether we should use a real, physical jukebox. But here were the reasons not to:
- some music is released on vinyl, virtually all music is released digitally
- hybrid solutions of physical jukeboxes playing digital music exist but feel makeshift, with software far from being modern and user friendly
- high maintenance cost and unlikely to get cheaper in future
- The Duck and Rice interior design is not retro nor vintage
The more we thought about it, the clearer our vision of the Duckbox became. We simply wanted people to be able to pick a track on the Duck and Rice website using their smartphones, one song per user at the time. No tedious installing of an app, just instant access. That was the moment we realised Duckbox could be useful beyond The Duck and Rice.
Remember the party you had at your house, playing all your favourite songs and then that strange guy came along, taking over control of the music, playing tracks only he would know and skipping them halfway through?
The Duckbox, we realised, was a product in its own right. Anyone hosting a party in their own home could use it. So we’re going to launch a version for you very soon. Party on!
Moving Parts
The Duckbox does three things:
- Select music from the pub’s track list
- Automatically sync music listings with a website
- Queue and play music at The Duck and Rice (or your party)
We knew we would get music from various sources, ranging from neighbouring Soho record shops like Phonica, Sister Ray and Sounds of the Universe to SoundCloud to music stores like iTunes. To manage this we needed an easy way to add songs, remove, sort and group them. Furthermore, whatever we used or created had to provide a way to compile track listings so they can by synced with the website.
Select Music
I wanted to avoid creating our own music management tool. There are many already, like Google Play Music, Spotify and iTunes, to chose from, and to build a new one would have been a different project altogether.
First up, Google Play Music — you upload your own music or access songs from the store. Unfortunately it lacks an API that would allow us to integrate it into our app. Though there’s an unofficial one, this ruled it out immediately.
Next, Spotify — the streaming service offers a vast catalogue of music, has offline playlists and also allows adding your own music locally. As opposed to Google they got a web API and various SDKs, in particular the Libspotify SDK.
The last contestant entering the stage was iTunes. It’s free and staff at the Duck and Rice responsible for the music selection would know how to use it. In terms of reading the library programmatically I first came across an unofficial API called pyItunes but it’s got trouble reading non-MP3 files, and will be prone to failure in case Apple decides to change the library format. Luckily Apple introduced the Media Library framework in OS X 10.9 Mavericks.
We were tempted to use Spotify due to its popularity but eventually decided in favour of iTunes because of the reliability of the platform. The Duck and Rice is open seven days a week, about 12 hours a day and the Duckbox running throughout. Every time the underlying technology changes as part of a software update, there could be a potential need to update the Duckbox to avoid malfunction. Using iTunes (hopefully) reduces that risk.
Spotify and Apple, though competing in the music business, are fundamentally different companies. The former is moving fast in a very competitive environment, building apps for web, mobile and desktop. Apple on the other hand builds platforms for many third party developers, including Spotify. This puts Apple in a position where they have to think carefully about the implications for those developers whenever they make changes to iOS or OS X. Spotify of course also has to consider these scenarios but less so which gives them more freedom to introduce, change or end support for certain technologies quicker. Although Apple also deprecates APIs over time, I believe it’s safer for The Duck and Rice to use a system that’s purely build on technologies shipping with the operating system.
Using the Media Library Framework is relatively straight forward. It loads most of the data asynchronously which means you’ll end up using KVO a lot.
Technical Detail: Internally the Media Library Framework uses an XPC service to talk to a media source. Occasional crashes, especially happening in low-memory situations, cause the MLMediaLibrary to reload all objects. Since there’s no direct access to the underlying XPC service we detect whether playlists are still loading or not by checking if their mediaObjects property are nil.
Automatic Sync
Since we wanted Duckbox to work not only for The Duck and Rice we decided to create a dedicated web app running independently from the pub’s website. The Duckbox Mac app would talk to it via a web API, the website would then request the information using the same API client-side.
Besides storing the actual track listing we had to associate these with the corresponding host. We also added endpoints for storing the currently playing track as well as for the artwork. Excellent Bradley Griffiths who built this part went for a combination of Go and Redis.
As far as the Duckbox Mac app was concerned, we simply created an XPC service called Publisher that talks to the API. It serialises tracks and playlists into JSON before sending it off. Whenever the tracks or selected playlists change it updates the server. Conveniently, changes made within iTunes including track reordering or editing ID3 tags automatically propagate through the Media Library framework.
Queue and Play
Undoubtedly the most important bit of a jukebox is the actual playback. Whenever someone picks a track it should be added to a queue and only start playing after the current track has finished playback.
One question that came up was how we would handle identical music requests. As opposed to a real jukebox you don’t have to walk up to the Duckbox. Instead you just visit the website and pick a track. This makes it less obvious how many people are waiting for their selection to be played. I believe the wait for your selection is what matters. Hence we decided to add a track only once in case it gets selected by multiple people.
To keep the queue short, Duckbox allows only one selection per user at any given time. You can change your mind and pick another song if you’re unhappy with your initial selection. As soon as your track has played you’ll be allowed to make another request.
We added another XPC service, this time called Remote, to our Duckbox app which handles all incoming connections as long as you’re on the local Wifi. It runs a local HTTP server to accept music requests and passes them on to the main Duckbox app which controls iTunes to play the song.
Technical Detail: After considering to handle the playback entirely within Duckbox we opted for iTunes. It turns out Apple’s music app has a few neat features like custom track start and end times as well as per-track equaliser settings. Duckbox communicates with iTunes using AppleScript. Read more about how this can be achieved in objc #14.
So there it is — our entire setup. A website you can pick music from and a Mac app that does all the magic in the background in combination with a web API.
In case you are wondering what the Mac app looks like. We kept the interface very simple. One view to manage the music sources, another one to look and modify the playback queue plus an additional preference panel.
Would you like to try the Duckbox yourself just pop down to The Duck and Rice, join the Duckbox Wifi and browse theduckandrice.com for the available tracks. Soon we’ll make it available for your party, too. Cheers!
Also, when you go there you may notice a screen behind the bar. What’s going on there is subject of another post.
I work at the Rumpus Room where we work with agencies, broadcasters, charities and clients designing and building technology to create social entertainment across mobile, web and real world experiences.
Background image: photo by Natalie Downe, some rights reserved
