Background

I was recently asked by a friend to help him implement the website code part of Brandon Fuller's 'Now Playing' plugin for iTunes. The code Brandon provides is PHP, and I felt that would be limiting if my friends website ever had to move to a non PHP enabled web server. With this in mind I decided to convert and modify his PHP script to be JavaScript only. This article covers the code created to do so.

The Solution

Below is the javascript file to include on your website.

Javascript Code

You will need to set up a few values in the pseudo-constants section of the code first.

• REMOTE_XML_URL - is the remote url for the 'now_playing.xml' published by Barndon's ITunes plugin.
• DISPLAY_ARTIST, DISPLAY_TITLE and DISPLAY_ALBUM  - are flags for if to display these element.

The remainder of the constants all declare element IDs or css classes for the elements the javascript creates.

Lastly you will also need to set the _artworkUrl variable to point to the the default artwork url for when album artwork is not available.

          
            /*
File: NowPlaying.js Author: Duane Wingett Date: 21st February 2009 Purpose: For use
with Brandon Fuller's "Now Playing" iTunes addon, see: http://brandon.fuller.name/archives/hacks/nowplaying/
for more details. Browser Compatability: checked (Tested on) IE 6.0.2 Opera 9.52 Firefox
3.0.5 Netscape 9.0b3 Safari (Windows) 3.2.1 Chrome 1.0 Usage Policy: You are free
to use / distribute this code without charge, providing this acknowledgement remains
intact ane no profit is gained from use. */
            //
Constant Declarations
            var REMOTE_XML_URL = 'http://www.mySite.com/NowPlaying/now_playing.xml';
// Remote location of NowPlaying xml filevar DISPLAY_ARTIST = true; var DISPLAY_TITLE = true; var DISPLAY_ALBUM = true; var OUTER_CONTAINER_IDENTITY = 'NowListeningTo'; var IMAGE_CONTAINER_IDENTITY = 'ListeningImageContainer'; var TEXT_CONTAINER_IDENTITY = 'ListeningTextContainer'; var OUTER_CONTAINER_CSS_CLASS = ''; var IMAGE_CONTAINER_CSS_CLASS = 'FloatLeft'; var TEXT_CONTAINER_CSS_CLASS = 'FloatLeft
StudioInfoTextContainer RightBorder'; var ARTIST_TEXT_CSS_CLASS = 'StudioInfoText'; var TITLE_TEXT_CSS_CLASS = 'StudioInfoText'; var ALBUM_TEXT_CSS_CLASS = 'StudioInfoText'; var IMAGE_CSS_CLASS = 'NowPlaying'; var CONTENT_DIV_ID = 'x'; //
ID of div to insert NowPlaying html into//
Declare variables - some with default valuesvar _artist = 'Unknown'; var _title = 'Unknown'; var _album = 'Unknown'; var _artworkUrl = 'http://www.mySite.com/Images/MusicNoImage.gif';
// Remote location of no image filevar _isIe = isIe(); var _xmlDoc; //
Purpose//
Detects if browser is IE////
Returns://
true if it is.//function isIe()
{ return navigator.appName.indexOf("Microsoft")!=-1;
} //
Purpose://
Loads the remote XML file into global variable.//function loadXml()
{ try { if (window.ActiveXObject)
{ _xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
_xmlDoc.async=false; _xmlDoc.onreadystatechange = populateArtistInfoFromXml;
_xmlDoc.load(REMOTE_XML_URL); } else { //
Opera, Mozilla, Safari & Chromevar xmlhttp = new
window.XMLHttpRequest(); xmlhttp.open("GET",REMOTE_XML_URL,false);
xmlhttp.send(null); _xmlDoc = xmlhttp.responseXML.documentElement;
_xmlDoc.onload=populateArtistInfoFromXml(); xmlhttp = null;
} } catch(e)
{ alert(e.message);
} } 
//
Purpose://
Populates global fields from global xml doc.//function populateArtistInfoFromXml()
{ try { if(_xmlDoc
!= null)
{ if((_xmlDoc.readyState
== 4) || (!_isIe)) { //alert('loading
values from doc..'); if(getNodeValue(_xmlDoc, "title")
!= null)
{ _title = getNodeValue(_xmlDoc, "title");
} if(getNodeValue(_xmlDoc, "artist")
!= null)
{ _artist = getNodeValue(_xmlDoc, "artist");
} if(getNodeValue(_xmlDoc, "album")
!= null)
{ _album = getNodeValue(_xmlDoc, "album");
} if(getNodeValue(_xmlDoc, "image")
!= null)
{ _artworkUrl = getNodeValue(_xmlDoc, "image");
} } } } catch(e)
{ alert(e.message)
} }//
Purpose://
Gets and the value from passed in XML document//
for the passsed in node name.////
Returns://
value if found or null;//function getNodeValue(xmlDoc,
tagName) { var value = null; try { if(_isIe)
{ value = xmlDoc.getElementsByTagName(tagName)[0].text; //
IE } else {
value = xmlDoc.getElementsByTagName(tagName)[0].textContent; //
Opera, Mozilla, Chrome, Safari } return value;
} catch(e)
{ alert(e.message)
} } //
Purpose://
Renders the NowPlaying html.////
Inputs://
artist - The artist's name//
title - The track name or song title//
album - The album name//function renderNowPlaying()
{ loadXml(); var sb = new
StringBuilderEx(); sb.appendFormat("<div
id='{0}'>\r\n", OUTER_CONTAINER_IDENTITY); sb.appendFormat("
<div id='{0}' class='{1}' >\r\n", IMAGE_CONTAINER_IDENTITY, IMAGE_CONTAINER_CSS_CLASS);
sb.appendFormat("
<img src='{0}' class='{1}' title='{2}' alt='{2}' />\r\n", _artworkUrl,
IMAGE_CSS_CLASS, _title); sb.appendFormat("
</div>\r\n"); sb.appendFormat("
<div id='{0}' class='{1}' >\r\n", TEXT_CONTAINER_IDENTITY, TEXT_CONTAINER_CSS_CLASS); if(DISPLAY_ARTIST)
{ sb.appendFormat("
<p class='{0}' >{1}</p>\r\n", ARTIST_TEXT_CSS_CLASS, _artist);
} if(DISPLAY_TITLE)
{ sb.appendFormat("
<p class='{0}' >{1}</p>\r\n", TITLE_TEXT_CSS_CLASS, _title); } if(DISPLAY_ALBUM)
{ sb.appendFormat("
<p class='{0}' >{1}</p>\r\n", ALBUM_TEXT_CSS_CLASS, _album); }
sb.appendFormat("
</div>\r\n"); sb.appendFormat("</div>\r\n"); var containerDiv = document.getElementById(CONTENT_DIV_ID);
containerDiv.innerHTML=sb.toString();
}
        

You may want to provide a little more error handling and checking for returned null values here and there to.

Html Code

Below is the HTML for the page to display teh now playing infomation. You need to place an empty div in the page and assign it the same ID that you set in the JavaScript constant "CONTENT_DIV_ID". You need to link to the two JavaScript files "StringBuilderEx.js" and "NowPlaying.js". Include a stylesheet to add your own styling and behaviour to the JavaScript created divs Finally call the "renderNowPlaying()" method after the empty div.

          <!DOCTYPE
html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <htmlxmlns="http://www.w3.org/1999/xhtml"><head><title>Now
Playing Test Page</title><linkhref="StyleSheets/BehaviorStyles.css"rel="stylesheet"type="text/css"/><linkhref="StyleSheets/AppearanceStyles.css"rel="stylesheet"type="text/css"/></scriptsrc="Javascript/StringBuilderEx.js"type="text/javascript"charset="utf-8"></scriptsrc="Javascript/NowPlaying.js"type="text/javascript"charset="utf-8"></head><body><divid="StudioInfoContainer"><divid="x"><!--
Now Playing will appear here --></div><scriptlanguage="javascript"type="text/javascript"> renderNowPlaying(); </script></div></body></html>
        

Summary

So there you have it a basic web site side implementation of Brandon's Now Playing feature. Feel free to use, alter or extend any of the code in this article.

Compatability

My the 'NowPlaying.js' JavaScript code has been tested and appears to work on the following browsers:

• IE 6.0.2
• Opera 9.52
• Firefox 3.0.5
• Netscape 9.0b3
• Safari (Windows) 3.2.1
• Chrome 1.0

Note

Full implementation of Brandon Fulller's 'Now Playing' iTunes plugin can be found on his website, the link is below.
The JavaScript extended StringBuilder class used in this code is courtesy of Ferreri Gabriele and can be found at the CodePrroject link, below.

Links

Brandon Fuller's Plugin
Ferreri Gabriele's JavaScript StringBuilder