A Streaming "Popup" Player for RadioDJ w/ Icecast

Just because I like to tinker with all sorts of toys, I put together a little page that can be used as a "pop-up" player for my RadioDJ/Icecast stream. Needless to say, a lot of this relies upon the hard-work of other RadioDJ users and enthusiasts--credit/links to be given at the end of this post.

My current iteration of the player relies upon six little files:

1. img.js

2. img.php

3. song.js

4. song.php

5. serv_inc.php

6. index.html

=> If you don't already know about the serv_inc file, it's the one that allows you to make your database connections. The only mods that are needed are, of course, those which will be necessary and unique to your particular installation. More info on that goodness can be found here: Demo Script For RadioDJ RC1 and Newer

The img.* and song.* files are based upon files found here: A live real time refreshing solution for web data (stream titles etc)[1] and at that topic author's site: http://stream.oxygenrad.io/[2]

=> 1: http://www.radiodj.ro/community/index.php?topic=7471.0 | 2: https://web.archive.org/web/20190603010902/http://stream.oxygenrad.io:80/

The index.html file is my own cobbled together creation.

Contents of the .js and corresponding .php files are very similar; as such, I'll give the song.* ones below, and just point out the changes to make for the img.* ones, if you wanna have the page load album art--if you've set up your system for that (...a whole other topic for another day, BTW):

song.js: $(function() { function reload(elem, interval) { var $elem = $(elem); var $original = $elem.html(); $.ajax({ cache: false, url: 'PATH_TO_SONG.PHP_GOES_HERE', type: 'get', success: function(data) { if ($original == data) { setTimeout(function() { reload(elem, interval) }, interval); return } $elem.html(data); setTimeout(function() { reload(elem, interval) }, interval) } }) } reload('#song_info', 5000) $("#song_info").fadeOut(); $("#song_info").fadeIn("slow"); }); ...for the img.js, set the URL to your img.php path, and change references to song_info to song_art.

song.php:

db_conn();

$shuffleQuery = null;

// ======================== //

$query = "SELECT ID, date_played, artist, title, duration FROM history ORDER BY date_played DESC LIMIT 0," . ($resLimit+1);

$result = mysql_query($query);

while($row = mysql_fetch_assoc($result)) {

echo " " . htmlspecialchars($row['artist'], ENT_QUOTES) . " " . htmlspecialchars($row['title'], ENT_QUOTES) . " Track Length [" . convertTime($row['duration']) . "] ";

}

@mysql_free_result($result);

db_close($opened_db);

?>`

...this gets trickier for img.php. Your query will need to change to something like:

$query = "SELECT h.date_played, s.artist, s.title, s.duration, s.album_art FROMhistoryAS h,songsAS s WHERE s.title = h.title AND s.artist = h.artist ORDER BY h.date_played DESC LIMIT 0," . ($resLimit+1);

...and your echo statement to something like:

echo " ";

index.html (or whatever you wanna call it, of course): `

YOUR_SITE_TITLE

MRP.insert({

'url':'YOUR_FULL_ICECAST_MOUNTPOINT',

'codec':'mp3',

'volume':100,

'autoplay':true,

'buffering':5,

'title':'YOUR_STATION_NAME',

'bgcolor':'#000000',

'skin':'greyslim',

'width':494,

'height':35

});

Close Player

...all of that, of course, can be customized to however you want it/need it.