MySpace Dev. 4: Restoring Music Functionality
June 22, 2006 — At this point, we’ve got a quirks-mode-based, broken HTML/CSS template that renders in IE6 and Firefox (for those on the IE7 beta, don’t worry — IE7 uses the IE6 quirks mode.) If you haven’t gotten this done yet, it’s time to go back and read the previous entries on MySpace IA and MySpace div overlays.
As expressed previously, the div overlay method of MySpace hacking requires us to build all dynamic content back into the template; none of the stuff MySpace generates for us will show up in our template. Due to MySpace’s heavy restriction of <script>, <object>, and <iframe>, we’re left with only the deprecated <embed> and Flash’s ActionScript to do our dynamic dirty work.
The problem without <param>
Since we can only use <embed> to embed Flash, we lose <param>, the correct way to pass specific parameters to Flash applications. Thankfully, Flash does allow parameters to be passed GET-style, but this limits our ability to use newer off-the-shelf Flash solutions to do the interactive work and adds complication when passing long data strings. This is a roadblock that any Flash coder has to keep in mind coding for the MySpace environment, and it’s one we’ll run into tomorrow when blog functionality is restored to MySpace.
An off-the-shelf solution to a common problem
Thankfully, an open-source solution to our music player dilemma already exists in the form of Fabricio Zuardi’s open-source XSPF Web Music Player. The player comes in standard, mini, and button sizes, reminiscent of Winamp, MySpace’s own player, and del.icio.us’s Playtagger, respectively. All three function similarly on the backend, so it’s up to you which size you feel fits your design properly. I’m using the mini player on mine.
To get the player to function properly, three components must come together: the actual audio files (in MP3 format,) the <embed> query string, and the XSPF XML document.
XSPF is an abbreviation for XML Shareable Playlist Format, a playlist type written using the XML document structure. This playlist format expands upon our music player to not only play one MP3 like the built-in MySpace player, but multiple MP3s. The XSPF requires only one node per track (<location>) to function, but we’ll use the <location>, <title>, and <creator> tags to build our playlist.’
As with any XML-based DOM, XSPF has some requirements. First, the parent node of the document is <playlist>, with <trackList> acting much like the HTML <body>. Within the trackList, there are multiple tracks, which denote different tracks within the playlist. For example, we’ll use Retrobyte‘s Onward as the track:
<location>http://yourdomain/onward.mp3</location>
<artist>Retrobyte</artist>
<title>Onward</title>
</track>
From there, we can place this track into the trackList. tracks in the trackList are parsed in descending order, so the first track in the trackList is played first. This will give us the playlist and the music player; unless you are a MySpace band, restoring music functionality in this format actually adds functionality, as previously a user was only allowed one song.
At the same time, this XSPF format does have a flaw of its own: you can’t use MySpace songs unless you download them and host them on your own server. For those addicted to the MySpace band list, the “Add” link on a MySpace band profile is absolutely useless with the XSPF player, as MP3s must be hosted on your own server. Any e-mails I get about this will be deleted, as I’ve laid it out in this paragraph.
Now that the most complex music player code is out of the way, we have to point the player SWF to the location of the XML file. Although documentation for the player tells us to use <object>, we can’t. Instead, use <embed> with the playlist as part of the query string:
playlist_url=http://yourdomain.com/path/playlist.xml”>
where yourdomain.com/path/player.swf is the URI to the swf and yourdomain.com/path/playlist.xml is the URI to the playlist. If you’re using the mini player, set the embed height attribute to 20 pixels; width is scalable with a minimum of about 50 pixels.
At this point, the MySpace template should be taking shape: we have restored all of the most common functionality minus the blog. Tomorrow, we’ll build an RSS reader in Flash to pull in the latest entry from a WordPress blog and then work around Flash’s cross-domain XML restrictions.
Comments?
Comments are closed on archived posts.