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:

<?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) . " <br /> " . htmlspecialchars($row['title'], ENT_QUOTES) . " <br /> 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 " <img class=\"album_art\" align=\"left\" width=\"200\" src=\"URI_PATH_TO_ALBUM_ART" . htmlspecialchars($row['album_art']) . "\" onerror=\"this.src='URI_PATH_TO_DEFAULT_IMAGE'\"/>";

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

<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"><title>YOUR_SITE_TITLE</title>
<script src="http://code.jquery.com/jquery-2.1.4.js"></script>
<script src="song.js"></script><!-- CHANGE PATH IF NECESSARY -->
<script src="img.js"></script><!-- CHANGE PATH IF NECESSARY -->
</head>
<body topmargin="15" alink="#e8e8e8" bgcolor="#000000" link="#e8e8e8" vlink="#e8e8e8">
<div style="text-align: center; line-height: 20px; color: #e8e8e8; text-decoration: none; letter-spacing: 0px; font-weight: bold; font-size: 10px; font-family: verdana;"></div>
<table>
<tr>
<td width=* height=200px><div id="song_info" style="text-align: center; line-height: 20px; color: #e8e8e8; text-decoration: none; letter-spacing: 0px; font-weight: bold; font-size: 12px; font-family: verdana;"></div></td>
<td width=200px height=200px><div id="song_art"><img src="PATH_TO_A_DEFAULT_IMAGE"></div></td>
</tr>
<tr>
<td colspan="2">
<br />
<div style="text-align: center;">
<!-- BEGINS: AUTO-GENERATED MUSES RADIO PLAYER CODE -->
<script type="text/javascript" src="https://hosted.muses.org/mrp.js"></script>
<script type="text/javascript">
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
});
</script>
<!-- ENDS: AUTO-GENERATED MUSES RADIO PLAYER CODE -->
</div>
</td>
<tr>
<td colspan="2">
<div style="text-align: center; line-height: 20px; color: #e8e8e8; text-decoration: none; letter-spacing: 0px; font-weight: bold; font-size: 10px; font-family: verdana;">
<br><a href="javascript:self.close()">Close Player</a></div>
</td>
</tr>
</table>
</body>
</html>`
...all of that, of course, can be customized to however you want it/need it.

Hopefully, if things have gone right, you'll end up with something like this:

Untitled [IMG]

Resources: http://www.radiodj.ro/community/index.php?topic=3502.0[3] http://www.radiodj.ro/community/index.php?topic=7471.0[4] http://stream.oxygenrad.io/[5] https://www.muses.org/setup[6] Tags: #radio automation, #RadioDJ

3: http://www.radiodj.ro/community/index.php?topic=3502.0

4: http://www.radiodj.ro/community/index.php?topic=7471.0

5: https://web.archive.org/web/20190603010902/http://stream.oxygenrad.io:80/

6: https://www.muses.org/setup

📝 Comment on this post

🔙 Previous Page