AJAX and PHP powered SHOUTcast playlist
Recently, a friend asked if I could help implement a customizable AJAX-powered SHOUTcast playlist for an Internet radio station, similar to the Rivendell playlist on wyrr.org. After taking a look at his setup, I realized that the software may change, but the concepts remain the same.
There are basically three steps to making a user-friendly Internet radio playlist:
1) Get the raw playlist onto your web server. This can be accomplished in a number of ways, depending on your software: automatic FTP, PHP's fopen(), cURL, etc. Here, we will retrieve a SHOUTcast playlist on a remote server using PHP's fsockopen().
2) Convert the raw playlist into usable XHTML markup. In this case, we will use PHP's str_replace() to strip a lot of unnecessary markup (<html>, <head>, <body>, navigation, etc.) from SHOUTcast's default played.html page and convert it to a valid XHTML table.
3) Auto-refresh your playlist with AJAX. This is much better than using "meta" refresh tags because it will allow you to only refresh your playlist's <div>, instead of the entire page that contains your playlist. Also, make sure that your AJAX degrades gracefully in the absence of JavaScript. We will accomplish this using jQuery and <noscript> tags.
Here's what you'll need in order to apply these concepts to a SHOUTcast playlist:
1) A working SHOUTcast server with a playlist page. Visit your SHOUTcast server's web page (usually in the format of example.com:8000, just replace "example.com" and "8000" with your SHOUTcast server's hostname and port number, respectively) and click "Song History." This link should take you to a playlist (played.html) that reflects the music you are currently playing. If not, please consult SHOUTcast's documentation to get a playlist going.
2) A web server with PHP 4 or greater. Your web server's firewall must allow outgoing connections to your SHOUTcast server's IP address and port number. If it doesn't, please adjust your firewall or contact your web host to resolve this issue.
3) This file: playlist.zip. Download it to your desktop and unzip it.
Now, let's make two changes to the playlist_convert.php file in the playlist directory that you just unzipped (this file has Unix line breaks, so Windows users will want to use Wordpad to edit it. OS X users can use Smultron). Change the values of the $host and $port variables to match your SHOUTcast server. For example, if your SHOUTcast server is monkeyjunk.com:8100, your variables should look like this:
$host = "monkeyjunk.com";
$port = "8100";
Hopefully, your SHOUTcast host has a better domain name. Save the file and upload the playlist directory and its contents to your web server's root directory. Navigate to yourdomain.com/playlist/ to see your AJAX playlist in action! If you disable your browser's JavaScript, you'll still see the playlist; it just won't auto-refresh. This is good for reaching a wide variety of users and it is proper SEO technique.
Now, let's talk about the look of your cool new playlist. Boring, isn't it? Well, now's your chance to take that index.php file in the playlist directory and style it up to match it to the rest of your website. You can also integrate your playlist into a content management system, though further discussion of this topic is beyond the scope of this writing. Once you're done, you'll have an aesthetically-pleasing, auto-refreshing SHOUTcast playlist to share with the masses!
If your playlist isn't working, verify that your SHOUTcast server's info is correct in playlist_convert.php and make sure that your web server allows outbound connections to your SHOUTcast server's IP address and port number.
Note: This article was written for SHOUTcast Server Version 1.9.8/win32. If you are running a different version of SHOUTcast or a different platform, you will need to do some tweaking to the $HTML array in the file named playlist_convert.php, or else you will get some very garbled output!