Displaying SongWriter output on your Blog

I’ve talked about the great SongWriter Plugin for Windows Media Player 9 previously (here). To answer a request from the SongWriter forums, I want to briefly explain how I use SongWriter to upload my currently playing & previous songs and display them on my blog.

First and foremost, this is how I do it. This may not be the best way to use SongWriter and it may not work at all for you. Everybody clear? OK. For starters, let’s get past the few basics. I use the following:

MovableType

Windows Media Player 9 (WMP)

SongWriter plugin

PHP scripts on my pages

I wanted to be able to pull the album cover for the song I was listening to, along with the artist and title. With a little extra tinkering, it became really simple to use the album name along with the artist name to create a direct search into the Barnes & Noble database if people wanted to know more about the album, hear samples or even buy it. (I use B&N.com because it pays the bills here, but you may also configure the scripts to point to other sites, I presume.) After a while I became enamored with adding the last “x” number of songs in my playlist. All this information comes together on the left sidebar of my blog. Just in case it’s moved or I turned it off, it turns out looking like this.

Now, the fun part, how did we get from point A to point B. Easy enough.

From SongWriter to the server:
I use SongWriter to export Artist, Title, Album, and Small Picture. (If you plan on my script initially, I would suggest you stick with **exactly these options** for now. Once you have the hang of it, you can export as much/little as you like.) I use the remote FTP option in SongWriter to upload the data from my computer to the webserver. I select the text and the xml uploads. The trick here is simply having a connection to the internet and using the correct paths to a directory on your webserver. SongWriter will automatically send the data every time a new song starts.

As SongWriter continues to upload information to my webserver, the following files are created: smsongout.jpg, songout.txt, and songout.xml. (Click to see the contents of the files – if you feel you need to.) Once the files are in place, it’s just a simple matter of processing the information contained in each, formatting it, and outputting.

From the “raw” data into the scripts:
One caveat here, I began using SongWriter before the xml output was available. Since the xml is now available, it has basically made the “text” file output extraneous. Since I’m pretty lazy (and it works), I haven’t felt the urge to move completely to the xml, but I will before too long. Therefore, I have some php that pulls from the .txt file and some that processes the xml. Soon –when I’m not so lazy– I’ll use xml file for everything. But, I digress.

Again, I use php pages throughout my blog so I can jump in and out of php within my html formatting. That’s exactly what I do to create the “Now Playing” box. Ready? Here we go:

I use php to read the songout.txt and set each line in an array. This way we can just pull whatever lines we want to use. For example, if the songout.txt has 15 lines (artist, title, album, year, etc, etc) being outputted from SongWriter, I could call any of those pieces anywhere I want to. Each of the lines are contained in a $varname[x] tag (where x represents the line number from songout.txt). It’s important to see that numbering starts with 0, not 1.

Since my songout.txt file has three variables (artist, title, and album name), I’ll end up with three $varname arrays where $varname[0]=artist name, $varname[1]=song title, $varname[2]=a blank line, $varname[3]=album name. Now that the lines from songout.txt are in arrays, it’s just a simple matter of putting those varnames within my desired output.

The last step involves calling the “Last 10 Tracks”. This information is sent from SongWriter as an XML feed in the songout.xml file. For simple user convenience, I open this list of 10 tracks in a new window. The XML is processed by a php script so it can be displayed cleanly and linked to Barnes&Noble.com.

And that’s basically it.

Scripting the Output:
Here’s the actual scripting I use to create the “Now Playing” block with my comments explaining each piece. Anything that appears in blue is something you are going to want to configure on your own.

Code to Create the “Now Playing” Block:

<?php
$varname = file(‘/home/path/to/your/songout.txt‘);
?>

<!– Start the ball rolling – Use php to open the text file and dump each line into an array –>

<table border=”0″ width=”250″><tr><td width=”75″ valign=”top”> <a href=”http://music.barnesandnoble.com/search/results.asp?NME=<? echo $varname[0]; ?>&TTL=<? echo $varname[3]; ?>&SNG=&INS=&LBL=&TYP=P&CAT=&Search=Search” target=”new”>

<!– The above line has set up a link for the image to search into Barnes and Noble that searches for the name of the artist ($varname[0]) and the name of the album ($varname[3]) –>

<img src=”http://www.kevindonahue.com/kevin/music/wm/smsongout.jpg” alt=”<? echo $varname[0]; ?> – <? echo $varname[3]; ?>” border=”0″>

<!– Here we’ve used the varnames to give the image a title in the artist – song title format–>

</td>
<td valign=”top” style=”side” class=”side”><a href=”http://music.barnesandnoble.com/search/results.asp?NME=<? echo $varname[0]; ?>&TTL=<? echo $varname[3]; ?>&SNG=&INS=&LBL=&TYP=P&CAT=&Search=Search” target=”new” title=”Shop for <? echo $varname[0]; ?> – <? echo $varname[3]; ?>”>

<!– Created a link for the text to search Barnes&Noble just as we did for the image –>

<? echo $varname[0]; ?>

<!– Print the name of the artist –>

</a><br><i>”<? echo $varname[1]; ?>”

<!– Print the song title –>

</i><br><br><a href=”http://www.yourwebsite.com/path/to/your/sitepoint.php” onclick=”OpenTrackback(this.href); return false”>Last 10 Tracks</a>
<!– Open our php script page to parse the XML feed – script shown below –>

</td></tr></table>

OK. As I just mentioned, we have to parse the XML feed. I have chosen to show that output in a pop up window using a little piece of javascript native to MovableType, hence the “onclick” variable in the code above. This is completely up to you. If you don’t use MovableType, you will get a javascript error so you’ll either need a new pop up code or perhaps just eliminate the onclick snippet in favor of target=”new”.

Code to Parse the XML and Output the Last 10 Tracks:
This is essentially the complete sitepoint.php file referenced above. You could just cut and paste the script below, save as “sitepoint.php”, upload to the same directory as your “songout.xml” file and you’re ready to display your last 10 tracks. Again, since it’s php, you could place html tags before this code snippet and after to format the page as you want.

Here’s the script to parse the xml:

<?php

$open_tags = array(
‘SONGWRITER’ => ‘<SONGWRITER>’,
‘MEDIA’ => ‘<MEDIA>’,
‘ARTIST’ => ‘<ARTIST>’,
‘TITLE’ => ‘<TITLE>’,
‘ALBUM’ => ‘<ALBUM>’);

$close_tags = array(
‘SONGWRITER’ => ‘</SONGWRITER>’,
‘MEDIA’ => ‘</MEDIA>’,
‘ARTIST’ => ‘</ARTIST>’,
‘TITLE’ => ‘</TITLE>’,
‘ALBUM’ => ‘</ALBUM>’);
?>

<?php

// handles the attributes for opening tags
// $attrs is a multidimensional array keyed by attribute
// name and having the value of that attribute
function startElement($parser, $name, $attrs=”){
global $open_tags, $temp, $current_tag;
$current_tag = $name;
if ($format = $open_tags[$name]){
switch($name){
case ‘MEDIA’:
echo ”;
break;
default:
break;
}
}
}

// $current_tag lets us know what tag we are currently
// dealing with – we use that later in the characterData
// function.
//
// when we see a </STORY> we know that it is time to
// flush our temp variables and prepare to move onto
// the next one
function endElement($parser, $name, $attrs=”){
global $close_tags, $temp, $current_tag;
if ($format = $close_tags[$name]){
switch($name){
case ‘MEDIA’:
return_page($temp);
$temp = ”;
break;
default:
break;
}
}
}

// this function is passed data between elements
// theu $data would equal ‘Title Here’
// in the line <TITLE>Title Here</TITLE>
function characterData($parser, $data){
global $current_tag, $temp, $catID;
switch($current_tag){
case ‘ARTIST’:
$temp[‘artist’] = $data;
$current_tag = ”;
break;
case ‘TITLE’:
$temp[‘title’] = $data;
$current_tag = ”;
break;
case ‘ALBUM’:
$temp[‘album’] = $data;
$current_tag = ”;
break;
default:
break;
}
}

?>

<?php

// this echo tells the script how and what to output to the browser
function return_page(){
global $temp;
echo ‘<a href=”http://music.barnesandnoble.com/search/results.asp?NME=’.$temp[‘artist’].’&TTL=’.$temp[‘album’].’&SNG=&INS=&LBL=&TYP=P&CAT=&Search=Search” target=”new”>’.$temp[‘artist’].’ – ‘.$temp[‘title’].'</a><BR>‘;
}

// what are we parsing?
$xml_file = ‘songout.xml’;

// declare the character set – UTF-8 is the default
$type = ‘UTF-8’;

// create our parser
$xml_parser = xml_parser_create($type);

// set some parser options
xml_parser_set_option($xml_parser, XML_OPTION_CASE_FOLDING, true);
xml_parser_set_option($xml_parser, XML_OPTION_TARGET_ENCODING, ‘UTF-8’);

// this tells PHP what functions to call when it finds an element
// these funcitons also handle the element’s attributes
xml_set_element_handler($xml_parser, ‘startElement’,’endElement’);

// this tells PHP what function to use on the character data
xml_set_character_data_handler($xml_parser, ‘characterData’);

if (!($fp = fopen($xml_file, ‘r’))) {
die(“Could not open $xml_file for parsing!\n”);
}

// loop through the file and parse baby!
while ($data = fread($fp, 4096)) {
if (!($data = utf8_encode($data))) {
echo ‘ERROR’.”\n”;
}
if (!xml_parse($xml_parser, $data, feof($fp))) {
die(sprintf( “XML error: %s at line %d\n\n”,
xml_error_string(xml_get_error_code($xml_parser)),
xml_get_current_line_number($xml_parser)));
}
}

xml_parser_free($xml_parser);

?>

And that’s basically all there is to it. I know there’s a lot here and it might make you a little dizzy if you haven’t worked with php before. It’s really not that hard. The important things to remember are:

Change the blue items above to match your configuration

You have to use the above scripting on a .php page. (example: “index.php”) If you’re not using php on your blog right now, perhaps you put this information on it’s own page (music.php) and then use ssi to include it in your page. Just a thought.

If your going to use the xml parse script above, it’s easier to put it in the same folder as your “songout.xml” file. It’s just easier that way.

This is what works for me, there are thousands of different ways to accomplish the above. If you have trouble with this manner, maybe a different solution is for you.

If you use this on your blog, please trackback this entry and let me know!

Huge thanks to Shurosoft.com for the awesome plugin!

Best of luck!

MORE ON THIS TOPIC: