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) and at that topic author’s site:
http://stream.oxygenrad.io/

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
require_once('serv_inc.php');
function convertTime($seconds) {
$sec = $seconds;
// Time conversion
$hours = intval(intval($sec) / 3600);
$padHours = True;
$hms = ($padHours)
? str_pad($hours, 2, "0", STR_PAD_LEFT). ':'
: $hours. ':';
$minutes = intval(($sec / 60) % 60);
$hms .= str_pad($minutes, 2, "0", STR_PAD_LEFT). ':';
$seconds = intval($sec % 60);
$hms .= str_pad($seconds, 2, "0", STR_PAD_LEFT);
return $hms;
}
$resLimit = 0;
?>
<?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
FROM `history` AS h, `songs` AS 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):

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"><title>YOUR_SITE_TITLE</title>
<script src="https://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

Resources:

http://www.radiodj.ro/community/index.php?topic=3502.0
http://www.radiodj.ro/community/index.php?topic=7471.0
http://stream.oxygenrad.io/
https://www.muses.org/setup

Interrupting RadioDJ for WX Alerts

As a nice little thought problem, I decided to try and figure out a way to interrupt RadioDJ for weather watches and warnings–and I believe I’ve found a solution that works for my installation.

*NOTE: this solution is definitely NOT recommended for any sort of broadcast use–that’s what all that wonderful EAS equipment is for…

My first thought was to hook up an old NWR to the PC and have a tone detector monitor the input–a thought I might revisit–however, I ended up settling on a solution where a message received via IM triggers an AutoHotkey script. (…this idea came after a ton of other attempts at trying to find ways to push data to the PC, rather than having it poll at certain intervals.)

Unfortunately, I can’t jump in and give all the good details on the AHK script that I made–this is due to the fact that your system will be configured differently than mine, plus I really wouldn’t want to have you put that much faith in something I had some troubles with.
But, anyway… the basic idea to how I put everything together is this:

  1. I receive an SMS from the weather service on my personal phone.
  2. Using a neat little program installed on my phone, the message is forwarded to my AIM account via AOL’s SMS gateway. (…which will eventually get shut-down–I mean, everyone’s been killing off their gateways; honestly I was shocked to find AOL still had one in existence!)
    1. The program (SMS Forwarder) searches incoming messages beginning with “New Event.” or “Event Modified.”
    2. SMS Forwarder then replaces the found string with “Send *MY_AOL_USERNAME* and forwards it all to 246246
  3. My RadioDJ PC receives the message via Pidgin and “pounces” upon it.
    1. I configured Pidgin to have a “recurring” pounce that responds to any message received from my mobile number. I chose Pidgin simply because I remembered that it could execute a specified command when it sees/receives a message from a user. Another reason why I chose Pidgin is that I can tell it to sit in the system tray and not do any other attention grabbing or screen stealing stuff.
  4. My AHK script–which has been converted to an *.exe–is activated by the Pidgin pounce.
  5.  AHK loads and plays a preconfigured RadioDJ playlist–which only consists of a manual event for interrupting the current song and all other events.

As stated before, I really can’t delve into how the AutoHotkey script works. Similarly, I’m not going to go into detail on the creation of my manual event. Sorry. But, here’s the gist of it, so that you can try to figure it out on your own, if you’d like:

  1. Pause playback of the current song
  2. Disable AutoDJ
  3. Pause all events
  4. Load and playback the NWS stream from the database into Auxilary Player 1
    1. I found where someone setup a stream for my area’s NWS broadcast on Weather Underground. You may have luck doing the same…
  5. Wait 2 minutes
    1. I decided to use two minutes as the delay before returning to normal playback, based upon info I found that stated this was the old “standard” for delayed return in decades past. (Don’t ask me where I found this–I can’t remember.)
  6. Stop playback of Aux Player 1
  7. Unpause playback
  8. Re-enable AutoDJ
  9. Re-enable Events

…as for the “playlist”: load up the playlist builder, insert the manual event, and save the playlist.

Obviously, there’s a lot more tinkering that could be done to the whole process in order to make it act a lot more like a “real” station’s setup–which is why I say I’m thinking about revisiting my idea of hooking a NWR up to the PC.

Unfortunately, there’s a couple points of failure in my setup–reliance upon my receiving an SMS, using AIM to trigger the playback of that stream, and the stream itself. If I were to use a radio and detect it’s tone, I’d eliminate those three points… but, I still face the potential failure of the radio receiving signal, and the possibility of having false-positives in tone-detection if I use and older radio that won’t reset without user intervention. (…I discovered that I’d need to do a lot of tweaking to the detection level of the given tone, as a poor quality signal can distort and create the tones I’d be looking for.)

…but, for now, this is a workable solution as I’m only using the program for my own enjoyment. 😉