This is a continuation of my blog post about building a streaming radio station – the first part can be found here. The first post was related to the server side aspects of the project. In this post, I’ll talk about the client-side player I built for stkbuzz.com.

Client Side – iframe hacks and jPlayer

With the Python script complete, the Icecast station was streaming and maintaining its own playlist – it could be streamed by pasting a link into your media player of choice. However, I wanted the station to be as accessible as possible. Ideally, there would be a persistent player embedded into the bottom of the website. Of course, the best way of accomplishing this is by building the website with this idea in mind, using AJAX to load new content without ever navigating away from the player. It was a little late for that, however.

The next best solution was to get hacky with iframes. I decided to implement this solution. The idea is that every page on the site is marked as either child or parent (the parent page being the page with the MP3 player and an iframe, which will show the rest of the site’s content; the children being everything else). If a child page is loaded outside of an iframe, we redirect to the parent page, while pushing the original URL so that it knows what page to load into the iframe. We also use Javascript to update the URL in the browser’s location bar so that it’s still possible to link to a specific page externally. The only downside is the addition of a # to every URL – not a terrible tradeoff, considering that the solution worked more or less flawlessly.

Building the player itself was easy. I used jPlayer, a jQuery library that implements cross-browser audio streaming. It’ll attempt to use HTML5 to stream media if it is available; if it’s not, it can fall back to Flash. Fortunately, it works without a hitch with Icecast – just set Icecast’s MP3 mount point as the source media file.

Once the user hits the play button to start streaming audio, I had the player check in with the Icecast server every five seconds to grab the artist and title of the currently playing song (I used  jCycle to build a ticker to display various information). Icecast doesn’t make it particularly easy to get the currently playing song’s metadata, but I wrote a few tiny PHP scripts that output the desired information by calling MPC. Part of the five second check-ins involved curling these scripts.

In the third and final post of this series, I’ll talk about how I implemented analytics for the station. Stay tuned!