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.
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!
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.
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!