XML, XSLT and XSPF – A few cool tricks for managing music online

Update: The code running the website has changed a lot since this post, but most links should still work, even if the pages are organized differently (e.g. there’s no single download page anymore)

Today I had a chance to record a song called Walk Away. I’d been meaning to for a while and I wanted to get more than one tune of mine up onto the interweb. However, when updating the website, I decided to revamp things a little.

Initially, I just threw together some static HTML for the body of the page. I used the Last.fm embed feature to allow playback of my songs.

I had a better idea though. First, I decided to create a basic XML file to manage my music. At a later date, I can always refine the structure and/or construct it dynamically if I want something more sophisticated.

The next step was to create a basic XSL stylesheet to transform my XML database into XHTML for the download page. The site still looks ugly, but it’s automated and the structure is there so I can pretty things up quite efficiently when I have a chance.

Where this really became useful was with respect to integration with the XSPF Web Music Player. This nifty (yes, nifty) little flash program lets you embed MP3 playlists into your web pages uses the open XML-based XSPF (“spiff”) format. Another XSL stylesheet allowed me to reuse my XML database to generate my XSPF playlist which is used by the music player on the listen page.

The PHP code for these transformations is fairly simple:
header("Content-type:text/xml");
$xml = file_get_contents('path/to/file.xml');
$xslt = file_get_contents('path/to/file.xsl');
echo xml2html($xml, $xslt);

Where xml2html is:
function xml2html($xmldata,$xsl) {
  $arguments = array('/_xml' => $xmldata,'/_xsl' => $xsl);
  $xsltproc = xslt_create();
  $html = xslt_process($xsltproc, 'arg:/_xml', 'arg:/_xsl', NULL, $arguments);
  if (empty($html)) {
    die(sprintf("XSLT processing error in %s, line %s: %s",
     __FILE__, __LINE__, xslt_error($xsltproc)));
  }
  xslt_free($xsltproc);
  return $html;
}

There are four variations of the XSPF Web Music Player and I’ve made use of three of them so far. The extended player is featured on the listen page, the button player allows for previews on the download page and there is a link below the extended player for Firefox users to take advantage of the sidebar player (thanks to this tutorial). The last player is the slim player, which I will make use of when I get around to coding individual song pages (ie. to include lyrics and other information).

The only thing I was not able to do, despite many efforts, was recompile the flash in order to make some customizations of my own. I tried using MTASC – a free and open source ActionScript 2 compiler – from the command like and using ASDT – a set of ActionScript plug-ins for Eclipse. The compiler just hated the XSPF source. I could make compiler errors go away by stuffing the code inside of a class, but then I’d have to go through and edit all of the variables to make them accessible from outside… It’s a hack that might work, but it seems more likely that I’m missing something obvious as you shouldn’t have to rewrite the source in order to compile it. If anyone has any advice on how to go about recompiling the ActionScript, please let me know!

Since the XSPF Web Music Player is fairly configurable through built-in options though, the stock version is certainly adequate for my needs. But it’d be nice to be able to play around with it further. (Maybe I could try to add OGG Vorbis support so that I don’t have to use MP3s…)

The next step will be to build a songs.php script that displays lyrics for a given song, as well as the year and possibly a description of sorts on a single page, making use of the XSPF slim player. Then, I’ll have a solid base for building the rest of site, tweaking the design on top of things. And I’ll probably reuse the idea for my band’s site since I’m using the XSPF Web Music Player there as well.

Maybe if I get even more adventurous, I’ll use something like getID3() to generate the XML file automatically (though it will still be lacking certain information, such as lyrics, relying only on the filename and ID3 tags). But that’s for another day!

Feel free to check out my XSPF player and listen to my new recording!