MySpace Dev. 4: Restoring Music Functionality
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 my friend Retrobyte’s Onward as the track:
<location>http://hyalineskies.com/repository/myspace/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. I used the same width as a div as the width of my player on my MySpace page.
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.
Article Abstract
Posted 22 June 2006. Approx. 821 words.
After the div overlay method, we had to use Flash to bring back in audio using an open-source music player. The end result is an entirely unrestricted MySpace player, fully independent of the MySpace bands page (for better or for worse.)
From Our Sponsors
Comments
Comments RSS Feed for “this post”
I’ve actually got the article written — I’ve just been so swamped at work that I haven’t had time to put it up. I’ll put the article online this evening or tomorrow for sure. Sorry for making everyone wait so long.
Wow. You’re obviously very well informed on all of this, and posting it for people like me to read is something I more than appreciate. I can’t wait until you post another, but apparently you post when I do, and that’s when you have the time. I can’t wait!
I can’t wait to see the ability to include RSS feeds on my myspace site. Can you email me when you post the article?
your articles really opened my eyes to whats possible with myspace. just one thing though I dont think you stress enough the importance of the player and the playlist being on the same server.
I found it rather frustrating that unless you clear your browser cache, updates to the playlist on this player go unnoticed..
There’s a pretty easy fix though, all that needs be done is to add the following line to the actionscript:
playlist_url = playlist_url + “?no-cache=” add getTimer(),”";
add that before the “playlist_xml.load” statement, and it will cause the playlist to be loaded with a unique URL each time, thereby forcing a refresh. :)
Could you please tell me how could I restrict the music to be downloaded in full to the listeners cache. I am trying to protect the rights of the producers.
Thanks
Costis:
You’ll need to actually edit the .fla file and remove the right-click “Download” functionality.
new myspace ?
embed tags a re written to allowscriptaccess and cross domain etc….
i think it is no more possible to load from external domain
?
how to
Alain:
Everything here is still working fine for me. Make sure that you have your crossdomain.xml file set up properly (that both the markup is clean and that you have it in your domain’s root.)
Im new to Actionscripts in general and was wondering was there a way to get your player to “autoplay”?
By the way: Thanks for the great info on overlays and Divs. I’ve learned alot.
Thanks again!
Hey,
I’m trying to hack my myspace band account.. similar to what http://www.bandspaces.com do .. Do you know of a way to position Myspace’s Mp3 player?
Thanks a lot, great site!
Ben
Well i think I have everything set up according to the instructions, concerning the embedding and playlist
but the player box still remains white and does not load.
I started the playlist with and then did the exact same coding with tracks. I embedded instead of doing , yet somehow when i get back to the code again it switches itself back to object.
Ive got the mp3s uploaded on the server and in the playlist. dunno what else to do.
Hey there, As a U.S. Marine, I find the information on your site very appriciative, but forgive my ignorance to CSS, XML, Flash, ect.. I’m smart enough to code my own pictures and widths and colors and stuff…But I also have a band site that I would LOVE to make professional looking…I noticed alot of bands have 20+ songs on their myspace player, and I’m assuming its something to do with what you were talking about….But I would appriciate this bit of info, personally…
Thanks, Unknown03
Orrah, Kill ***, Eat ***
There is a way to use the original myspace player, and have all funcitonality.
td td embed {position:absolute; left:50%; margin-left:-150px; top:400px; width:295px; height:51px; } td td td embed { position:static; width:auto; height:auto; }
but if you’re using it with a div overlay, you’ll have to add a “z-index” fragment, and just adjust the width and such as you feel necessary.
Be sure to validate your xspf file if the player is not working. go to http://validator.xspf.org/ The format given on this page will not validate. tags appear to work and tags are now being stripped. Opposite of what was done in this article. Check website of player for autoplay. Don’t be lazy and ask here. =)
wow, thank you so much! you totally saved my day.
Write Your Own Comment
To preserve legitimate discussion, please use your real name and email address.
Your email address will not be published. Derogatory comments will be deleted.
External Discussion
Displaying the only trackback.
Export iTunes Playlists to…
Since Pilot Training requests for MySpace modifications have been overwhelming as of late, I decided to augment the Hack Pack a little with a geeky…
I’m very impressed with your site layout and everything that you have done with what can be called a difficult situation with myspace. I already keep two blogs as it is and so I can only say that I wait excitedly for a description on how to embed an RSS reader into my myspace profile. Thanks for the great information.