My Radio Box Hack

April 19 2011

My Radio Box Hack

Photo by Jenny Ekelund

A few weeks ago I took part in the Radio Box Hack weekend, where I did some experiments with Mobile HTML5 geolocation and audio playback on mobile devices.

I had been playing with what I was calling a “GeoSoundBoard”, where users could walk around unlocking sounds when they reached certain locations. My demo was using sound clips from a BBC Radio 1 soundboard for Tim Westwood - imagine walking around the corner and hearing Westwood drop a bomb!

You can try it out for yourself - drag and drop the blue marker onto one of the nearby orange markers to hear it go off.

On my iPhone I found that while the HTML5 audio would play fine when I dragged and dropped the marker, it wouldn’t play when I actually walked towards one. I never got to the bottom of this issue but it’s likely to be because HTML5 audio playback on mobile devices must be triggered by direct user interaction to avoid excessive data charges or battery consumption.

My Radio Box Hack

So at the hack day I decided to change the UI so that it would display information about the track a user had unlocked such as an image and description and offer the option to play the track. I also wanted to prototype an authoring solution so that curators could produce audio playlists around a certain theme and scatter those tracks in the real world. And with Abdel's help we got a more robust player implementation for the audio playback.

You can check out what we built at It uses: - Ruby and Sinatra - JQuery Mobile - JPlayer for the audio playback (thanks Abdel!) - Google Docs for the CMS check out the instructions and a sample playlist

And the source is on GitHub.

Thanks to the guys and all of the other Radio Box hackers - it was fun!