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
 * -------------------------------------------------------
 * 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 );
}