Detect song change when streaming Icecast radio station

Question

I am using JPlayer to stream an Icecast station and would like to show the current song name whenever a track changes. I have PHP that uses a function (https://gist.github.com/fracasula/5781710) to detect the current playing track.

I would like to update the track title and band image every time a track changes. I can't find a way to trigger an event every time a song changes, but know that the song meta-data is sent in the stream every 16,000 bytes (Title of current icecast streamed song).

Is there a way to check for the metadata block containing the song information using Javascript, thereby allowing me to change the song title (and corresponding google image) whenever a new track plays?

My current code is below (I'm just pinging the script to get the current track every minute at the moment):

$(document).ready(function(){

var stream = {
    title: "My Stream",
    mp3: "http://mystream.com:8000/myStream"
},
ready = false;

$("#jquery_jplayer_1").jPlayer({
    ready: function (event) {
        ready = true;
        $(this).jPlayer("setMedia", stream).jPlayer("play");
    },
    pause: function() {
        $(this).jPlayer("clearMedia");
    },
    error: function(event) {
        if(ready && event.jPlayer.error.type === $.jPlayer.error.URL_NOT_SET) {
            $(this).jPlayer("setMedia", stream).jPlayer("play");
        }
    },
    stop: function(event) {
        console.log("stop");
        $(this).jPlayer("setMedia", stream).jPlayer("play");
    },
    swfPath: "js",
    supplied: "mp3",
    preload: "none",
    autoPlay: true,
    wmode: "window",
    keyEnabled: true
});

requestTrack();
setInterval(requestTrack, 60000);

// get the current track info
function requestTrack() {
    $.get( "tools/getTrack.php", function( data ) {
        console.log(data);
        $( "#current-track" ).html( data );
        // search for an image with the band/song name
         $.get( "https://www.googleapis.com/customsearch/v1?key=MY_KEY&cx=MY_CX&q="+encodeURIComponent(data)+"&searchType=image", function( data ) {
            console.log(data.items[0].link);
            $("#album").attr("src",data.items[0].link);
         });
    });
}

});

Answer 1

The metadata block isn't detectable in JavaScript. In fact, it isn't requested by the browser at all. You have to do this server-side. You could implement polling, or modify a script on the server to push data to clients as the metadata changes. (This would require a constant connection to the Icecast/SHOUTcast server from your HTTP server.)