Almost two week ago, we released our iPad App Radios. And today the first update, with more features, more radio stations and multilingual interface, was approved and deployed by Apple.
Radios plays mp3 streams on your iPad from some Swiss radio stations, so nothing special. But additionally, it also displays which band and song is currently playing including artist information and pictures from last.fm. All in all, it is an app which is not designed for the time you spend with the iPad on your couch, but for the many hours the device sits on the sideboard next to your couch. And it's really fun to see the pictures to the bands currently playing on the radio, especially if the pictures are a little bit older :)
The project started with the idea of trying out this new tablet format and a Liip hackday. I made some proof-of-concept work with the mp3 streaming part and then four Liipers sat together a whole day (a so called hackday, it's an institutionalized format at Liip, where you get time to “hack” on whatever you want) and built that thing. Or most of it, at least :)
The app uses PhoneGap as the underlying part. With PhoneGap one can program an iPhone app with “just” html, JavaScript and CSS. It provides some additional APIs you don't have in Mobile Safari for some device specific features, like vibration or the accelerometer.
While PhoneGap has an API for Sound, it doesn't have one for live streaming and reading metadata from that streams. We needed the first to stream the radio station feeds and the second to display the artist info. I started googling and quickly found this “ Streaming and playing an MP3 stream” article by Matt Gallagher, incl. Objective-C code and all. Integrating that in the app was a breeze, even with my pretty basic Objective-C skills.
Next task then was to be able to call those newly added methods via JavaScript. Thanks to PhoneGap that wasn't too hard to implement. Basically you create some “special” methods in Objective-C, like the play method in AudioStream.m and then add some “special” javascript methods like the play method in AudioStream.js, which basically just calls the native method. It's easy as that. If you need return values from a method call, you have to do that with callbacks, see eg. getMetaData.
We also added a very simple Lang class to get the user language for displaying the info in the right language.
The one problem with the above mentioned MP3 streaming class was, that we didn't have the info about which artist is currently playing. I tried to figure it our by myself how that works. Most radio stations are using the Shoutcast Metadata Protocol. Fortunately I didn't have to implement it by myself and I found the audiostreamer-meta class by Mike Jablonski, which was based on the work abov. I put some wrapper around it and my work on the native Objective-C side was almost done.
The whole code/fork of phonegap-iphone with the mentioned plugins can be found on github at github.com/chregu/phonegap-iphone, the audiostream plugin code ist at github.com/liip/phonegap-plugins-audiostream
After having done that underlying work, we were able to start with the html/JS/CSS work for Radios. It was almost standard procedure, but with trying out some of those new CSS3 and html5 features, it took some time to figure out some things. The scrolling wasn't an easy task either. But at the end, we have a standard based setting, which could be easily ported to Android (if the streaming/metadata part was ported to Android/Java, but that's doable), or to a “Browser-only” based version. Fabian actually did a version based on this, which worked perfectly fine in a standard browser. It just does the metadata stuff on the server side.
We really think, html/JS/CSS (aka NIWEA) based development of (not only) mobile apps is the future and where the future is too far away today, we try to mix it and get the best of both worlds, like here with this Radios app. We're actually doing a rather big customer project on PhoneGap right now, which will go online pretty soon and which allows us to deliver to iPhone and Android with almost the same code base.
More about that “Apps with Web Technologies” topic was published yesterday by Hannes in the blog post “ What's NIWEA?“.
We will also Open Source the app very soon, we just have to clean up some things. Watch this space.
And last but not least, many thanks to Fabian, Peter and Roland for their development work. And to Hannes, Fabienne, Memi and Tobias for the input during the brainstorming phase. It was a fun project and I'm sure it will live on and get some nice new features (like adding any station :)) in the near future. Thanks to the Liip Innovation and Training Program there's certainly time and budget for that.