BCmoney MobileTV

The XSPF Music Player is one of those “history of the web” old-time greats. It is a Flash application (SWF file) that was originally created by Fabricio Zuardi in late 2003 and which gained massive popularity and widespread usage between 2005-2008 in the beginning of the Web2.0 renaissance after the post Dot Bom era (aka. end of the Web1.0 timeframe).

XSPF Music Player

Music in Web2.0

Everyone was extremely excited about the possibilities of two-way publishing of content (known as the User-Generated Content revolution) that was lead by blogs like your’s truly, and, new web technologies like the XSPF Music Player we’re talking about today. It was a simpler time. A time when MySpace was taking over from Friendster as the leading Social Networking Service (SNS) and every VC wanted a piece; Facebook wasn’t even created yet, soon to enter its early days in a Harvard dorm room. Yes, believe it or not VC investment in “new and upcoming SNS startups” was actually a thing! Good luck now if that’s all you’re offering, you’ll need a lot more unique technology stack than basic Social Media capabilities to dethrone the likes of Facebook.

At any rate, playing (specifically streaming) music, podcasts, audiobooks, talks/lectures, or any other audio on the internet was just emerging as a possibility. Back then “Internet Radio” was the only main audio technology and was typically accomplished via desktop applications like WinAmp (client) with Shoutcast/Icecast (server), or full streaming servers paired with a web plugin like RealAudio (.rm), Quicktime (.mov/.mpeg), Windows Media Player plugin (.mp3/.m3u/.wav/.wma/.wmv) or a bit later, the “swiss-army knife” player of all multimedia formats, VLC web plugin (the first to support Mobile “.3gp” formats, all the other players tried to copycat and support as many formats as possible after it took the web by storm). It was still a wild west time, when anything could happen. Big companies were still suing and trying to maintain their slipping grasp on control of the multimedia distribution channels. While Internet Radio enjoyed a passionate almost cult-like niche on the web, general Web Audio and static file playback barely had a developer community at this time, let alone having any kind of business market formed around it. Then along came Flash audio and video playback capabilities to liberalize and simplify Audio on the web, capable of reaching most of the online world on the strength of Flash’s 200 million+ plugin installs (now approaching 500 million). Back then it was just after the Napster/Kazaa P2P downloading days, and subsequent joint MPAA, FCC, Music industry crackdown on both consumers and sites sharing music in any manner these organizations viewed as contrary to the exact letter of copyright laws, and represented by frivolous yet very real and threatening lawsuits. At this time, there weren’t many legal audio streaming options the web music leaders were the likes of:

• Last.FM (for “scrobbling” or logging/sharing, a record of music you’ve listened to)
• MySpace (for finding hip new bands via their band pages)
• Eventful & Upcoming (for concert tour dates and tickets)
• Shoutcast & Pandora (leading “Internet Radio” services)

Each offered very limited, mostly one-way APIs that frustrated developers, and while each had basic audio players to some extent on their sites, none offered an easy way to play music for your own users, which is what developers really wanted to offer. The XSPF Music Player was at the time, the open web champions’ best answer to this problem. It promised the simplest possible way at the time, to offer music on your website for your customers or visitors to enjoy and a common  format for sharing playlist contents. It was great for the independent music community and resulted in a brief renaissance in creativity and direct interaction between music lovers and music creators.

Implementation

The XSPF Music Player software was written in Actionscript 2. As such, it is only available as a Flash shockwave player object (SWF). In order to embed the player on your own page, you would use an HTML snippet like the following:

<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0,0" width="400" height="170" id="xspf_player" align="middle">
<param name="allowScriptAccess" value="sameDomain" />
<param name="movie" value="http://musicplayer.sourceforge.net/xspf_player.swf?playlist_url=http://cchits.ning.com/recent/xspf/?xn_auth=no&autoload=true" />
<param name="quality" value="high" />
<param name="bgcolor" value="#e6e6e6" />
<embed src="http://musicplayer.sourceforge.net/xspf_player.swf?playlist_url=http://cchits.ning.com/recent/xspf/?xn_auth=no&autoload=true" quality="high" bgcolor="#e6e6e6" width="400" height="170" name="xspf_player" align="middle" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />
</object>

Support for XSPF

XSPF stands for eXtensible markup language (XML) Shareable Playlist Format, and is obviously an XML-based playlist format for listing out compilations of songs. Thinks of it as the “mixed tape” of the internet. It was a wise choice of the developers to implement this standards-based format rather than creating their own obscure custom format, as so many other media player solutions were doing at the time. While the format was most commonly used to list albums by a specific musician/band or the aforementioned usage of sharing interesting mixes of songs, it could now just as easily be used to play music on your website in mp3 format (however the playlist format doesn’t specify what format should be used so any audio format is fine including open formats such as Ogg Vorbis and webm audio). Recently, a JSON equivalent representation called Json Shareable Playlist Format (JSPF) was released as well, due to a large number of web developers switching their preferred data exchange format to JSON. An empty structural representation of each are compared side-by-side, followed by a full XML and JSON playlist example below:

<?xml version="1.0" encoding="UTF-8"?>
<playlist version="1" 
     xmlns="http://xspf.org/ns/0/">
  <trackList>
    <track>
	<trackNum></trackNum>
	<title></title>
	<location></location>
	<image></image>
	<info></info>
	<album></album>
	<duration></duration>
	<annotation></annotation>
	<creator></creator>
    </track>
  </trackList>
</playlist>

{
   "playlist" : {
     "title" : "", 
     "creator" : "", 
     "track" : [
       {
          "trackNum" : "",
          "title" : "",
          "location" : [""], 
          "image" : [""], 
          "info" : [""], 
          "album" : "",
          "duration" : "",
          "annotation" : "",
          "creator" : "",
       }
     ]
}

XSPF Example

<?xml version="1.0" encoding="UTF-8"?>
<playlist version="1" xmlns="http://xspf.org/ns/0/">
  <trackList>
    <track>
      <title>Windows Path</title>
      <location>file:///C:/music/foo.mp3</location>
    </track>
    <track>
      <title>Linux Path</title>
      <location>file:///media/music/foo.mp3</location>
    </track>
    <track>
      <title>Relative Path</title>
      <location>music/foo.mp3</location>
    </track>
  </trackList>
</playlist>

JSPF Example

{
 "playlist" : {
   "title" : "Two Songs From Thriller", 
   "creator" : "MJ Fan", 
   "track" : [
   {
    "location" : ["http://example.com/billiejean.mp3"], 
    "title" : "Billie Jean",
    "creator" : "Michael Jackson",
    "album" : "Thriller"
   }, 
   {
    "location"      : ["http://example.com/thegirlismine.mp3"], 
    "title"         : "The Girl Is Mine",
    "creator"       : "Michael Jackson",
    "album"         : "Thriller"
   }
  ]
}

These 5 tools will come in extremely handy when working with XSPF/JSPF and this HTML5 Audio version of the XSPF Music Player:

1. XSPF generator
2. XSPF validator
3. Configuration options (and embed generator) for XSPF Music Player
4. XSPF to JSPF parser/converter
5. XSLT for transforming XSPF to JSPF

One other useful tool which is “no longer with us” was the XSPF playlist sharing site WebJay, which was acquired by Yahoo! back in 2006 with the intention of continuing support for it, which eventually changed into rolling it out into their new Yahoo! Music product in 2008, which itself was unfortunately discontinued.

HTML5 Audio

This player has been such an excellent tool for so long, but with the impending death of Flash, I decided to take it upon myself to create an HTML5 Audio equivalent for posterity’s sake. I tried to follow the original’s look & feel as much as possible and recreate the basic features (display an image for the album associated with each track in the playlist, link to external sources in the playlist including affiliate purchase link or MusicBrainz metadata, hover for more info on tracks and album, “what’s playing now” title and “click to scrobble” forward/backward within progress bar, etc). Hope it might come in handy for some old die-hards that may still be around from the once thriving XSPF & online music community; compared to the original version of the player it functions almost the same but benefits from a responsive design (try resizing the browser), and, it always takes up 100% of its available width (so you’ll need to hide any overflows), however I’ve not taken the time to make a “generator tool” to set the styles/theme but luckily its all powered by CSS now so much easier to modify than it was when stuck behind Flash/ActionScript (which required a Flash MX Studio license). Check it out below:

Conclusion

Today we are spoiled with elegant HTML5 Audio options and massive liberation of developers from any form of plugin. Ironically though, this is coupled with continued lawsuit threats for innovators in the music space, subscription and fee-based services incumbents like Spotify, iTunes, Googly Play music, and countless other mainstream and independent music stores that charge by the song or album. We also have thousands of podcasts (iPodder) to sift through at least hundreds of which are of extremely high quality and well-funded with in-content advertising, along with free (LibriVox, LoyalBook) and fee-based (Audible, AudioBooks.com) Audiobook resources.