Chris Mendez in Javascript, For Developers

Displaying "Now Playing" Music Data

This is a tool that pulls, parses, and presents "now playing" data from Classical KUSC.

<!-- #whats_playing_now starts -->  
<div id="whats_playing_now">  
<div id="show">&nbsp;</div>  
<div id="track">&nbsp;</div>  
<span class="clickhere">  
  <a href="http://www.kusc.org/playlist/index.aspx">See the Detailed Playlist </a>
<br />  
</span><span class="listen_now">  
<a href="http://www.classicalkusc.org/stream/listen.html" target="_blank">  
<img src="http://www.kusc.org/Pics/header/btn_play.png" alt="" border="0" />  
</a></span>  
</div>  
<div>

<script charset="utf-8" type="text/javascript">  
var PLAYLIST_P = "http://webplaylist.org/cgi-bin/kusc/wonV5.json";  
$(document).ready(function(){
  $.getScript("http://kuscinteractive.org/js/org.kusc.nowplaying.js", getScriptCompleteHandler);
  function getScriptCompleteHandler(){
     loadJSON( PLAYLIST_P );
  }
});
</script>  
</div>  
<!--  #whats_playing_now ends -->  
/**
 * -------------------------------------------------------
 * What's Now Playing
 * -------------------------------------------------------
 * 
 * Version: 1
 * Created: cmendez@kusc.org
 * Modified: 5/10/2011
 * 
 * -------------------------------------------------------
 * Notes:
 *
 * 
 * */

#whats_playing_now{
    position: relative;
    left: 340px;
    background: transparent url( "http://www.kusc.org/Pics/header/bg.png" ) top left no-repeat;
    width: 661px; height: 101px;
}
.listen_now{
    position: absolute; top: 5px; right: 30px;
}
#show{
    position: absolute; top: 12px; left: 140px;
    font: normal normal normal 16px/18px Georgia, serif;
    color: #990000;
    white-space:nowrap;
    width: 380px;
    overflow: hidden;
}
#show ul, #track ul{
    list-style-type: none;
}
#track{
    position: absolute; top: 40px; left: 30px;
    font: normal normal normal 14px/20px Helvetica Neue, Helvetica, Verdana, sans-serif;
    color: #333333;
}
span.clickhere a{  
    position: absolute; top: 64px; left: 40px;
    font: normal normal normal 14px/20px Helvetica Neue, Helvetica, Verdana, sans-serif;
    color: #990000;     
}
/**
 * -------------------------------------------------------
 * KUSC.org What's Playing Now
 * -------------------------------------------------------
 * 
 * Version: 1
 * Modified By: cmendez@kusc.org
 * Modified: 5/10/2011
 * 
 * -------------------------------------------------------
 * Notes:
 * • Currently being used for production on kusc.org
 * • Purpose: Determine which program and piece is currently playing
          http://webplaylist.org/cgi-bin/kusc/wonV5.json
 * 
 * 
 * */
//Callback function from JSON
function playlistFeed( json ){  
    displayData( json[0] );
}

//JSON parser
function displayData( data ){  
    //(show title) (show sub-title)
    //(composer): (title) (in_key) (opus) (catalog)
    var show = data.show;
    var track = data.track;

    //Display the Show Title
    $("#show").html("<ul><li>" + 
        show.title + " " + 
        show.sub_title + 
        "</li></ul>" ); 

     //Instead we are now pulling from an ENCO XML Dump
        //ENCO is active
        if( track != null ){
            if( track.title != "" ) $("#track").html( "<ul><li>" + 
                "<strong>" + track.composer + ":</strong> " + 
                track.title + " " + 
                track.in_key + " " + 
                track.opus + " " + 
                track.catalog + 
                "</li></ul>" );

            //Make the title of the Show Larger
            else $("#show").css("font-size", "18px");          
        } else {
            $("#track").html( "" );
        }
}

//Include JSON in Header script
function loadJSON( url ){  
    var script = $("<script>").attr( { type: 'text/javascript', src: url } );
    $("head").append( script );
}