Archive for April 2012

Building a Streaming Radio Station, Part 3: Streaming Analytics

stk.fm in action

This is the final segment of my blog post about building a streaming radio station. Part 1 can be found here, and part 2 can be found here.

Streaming Analytics

The station was just about ready to launch. Just one part was missing – analytics. It’s difficult to keep track of analytics for streaming audio simply due to the nature of the content. I couldn’t find an existing solution that fit my needs, so I built my own.

I was only majorly concerned with a few different metrics – namely, how many people were listening, what they listened to, and how long they listened. I added a new table to the MySQL database that the rest of the site had been running on to keep track of these metrics. In the player’s check-in process, I added an include for a script which would register analytics. This script would add or update a row for that particular session (identified by PHP session ID) which stored:

  • Timestamps for the first and most recent check-ins
  • The first and most recently listened to songs
  • The number of seconds of music that were streamed

It wasn’t possible to derive the length of time the user was actually listening from the start and end times, as the player wouldn’t check in if the stream was paused. However, I of course knew that the player checked in every five seconds, so I could use this to get a fairly close approximation of how much audio was actually streamed.

 

Between now and the time that I started writing this series of blog posts, I unfortunately had to take stkbuzz down entirely. However, I do intend on making the previously mentioned Python script open source soon – I’d hate to see it go to waste!

Building a Streaming Radio Station, Part 2: iframe hacks and jPlayer

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!