Several years ago when tv top media players/network streamers were just coming out, I purchased a Popcorn Hour A-100, which was the first model in the line of “Network Media Tanks” made by Syabas. It’s actually quite capable even by today’s standards. It does 1080p h264 encoded MKVs with subtitles and all the rest with little fuss.

However there’s one thing it absolutely sucks at – music. More specifically the ability to do on-the-fly playlists and browse collections bigger than a few files. Newer models of the “Popcorn Hour” probably do this better with user contributed apps but I’m on a tight budget and thought I could rig up something myself. Unfortunately I couldn’t just go with an already developed app because they require a HD to be installed in the enclosure, which I do not have.

The closest thing out there that I *could* use was “Mediatank Controller” – but it suffered a major showstopper in my opinion. It lacked the ability to change your playlist after it had been started.

I like to play a track first, then start queuing up the others. I also like to mess with the playlist constantly while I’m listening. But the Coup de grâce of this new system would be the ability to seamlessly transition between playing via the Popcorn Hour, and playing via the iPhone/speaker dock or laptop.

So to make this happen I implemented:

1. Telnet access to control the Popcorn Hour. Instructions
2. A “dummy” playlist of 500 tracks with the url set to a php script on my home server. (example: http://server/ctrl.php?n=1)
3. A mobile friendly UI to use on my phone to queue up tracks. I used jQuery Mobile 1.1.0
4. ID3 tag reading to make browsing usable. I used the PHP class getID3() but I wouldn’t recommend it as it’s sssllloowww (had to implement caching, and the cache file alone was over 300 MB)
5. A playlist manipulator class, Popcorn Hour controller class, music sorting, and a few other goodies I wrote in PHP.
6. HTML5 Audio along side the web UI to enable local playback.

The system works like this: First – you add one or more items to the playlist which get written via the manipulator class to a flat file on the server. The controller class then telnets to the popcorn and kick starts the dummy playlist file.

The server then receives a request from the popcorn for track 1 shortly thereafter (ctrl.php?n=1). When this happens it opens up the playlist file and tries to find a track marked playing. If not found (such as in the case of first starting the list) the first entry will be tagged with the number which was requested (n=1) and then served.

When the popcorn moves on to the second (or nth) track (n=2), the playlist file is re-opened and a diff is made between the previous known playing number (1) and our new playing number (2), then the appropriate “next” track is served. This means that at any time, I can completely shuffle up the order and it will be followed.

To rope in the ability to transition between the popcorn and the iPhone or laptop, I use a bit of jQuery and html 5 audio controls. (Yes, I upgraded my iPhone to iOS5 specifically for this purpose!) When tracks are playing locally, the playlist on the server continues to receive updates on the position, so that if I “start” the playlist again on the popcorn, my last playing track will be the first in the queue. I was also pleasantly surprised to find the iPod controls on my sound dock actually pass through to the html5 audio instance in mobile safari.

And that it. Here are some pics to prove I did this frankenbuild.