---

A classic from the archives…..

A man by the name of Fabricio Zuardi has created an easy way to play MP3s on a site using a simple flash interface and Actionscript 2. His invention is called the XSPF Web Music Player, and what it does is it reads in a XSPF file to play the MP3s listed in the file. XSPF stands for XML Shareable Playlist Format.

Fabricio Zuardi created three different kinds of players: the Extended version, which has the player’s controls, the list of songs, the album cover, and current track; the Slim version, which just has the player’s controls and the current track; and finally the Button version, which is, like the name says, just a button. You click to play and click again to stop. You can see what all the players look like at his Source Forge page.

The first thing you should do if you want to set this up is download the player that you want to use. All of the files can be found on the Source Forge page. Upload all the files to your web server and read on.

The XSPF format is fairly easy. I will attempt to show what the basic setup of the file should look like. The great thing about the XSPF format is that there is already a site that will allow you to tell the site what songs to put on the playlist and it will convert that info into the proper XSPF format. The site is called WebJay. Anyway, here is the basic layout of an XSPF playlist:

<?xml version="1.0" encoding="UTF-8"?>

<playlist version=”0″ xmlns=”http://xspf.org/ns/0/”>

<trackList>

<track>

<location>http://www.example.com/folder/song.mp3</location>

<image>http://www.example.com/folder/album.jpg</image>

<annotation>Name of Track</annotation>

</track>

<track>

<location>http://www.example.com/folder/song2.mp3</location>

<image>http://www.example.com/folder/album2.jpg</image>

<annotation>Name of Track 2</annotation>

</track>

</trackList>

</playlist>

You obviously need to replace all the domain names and the track titles with the appropriate words, but this is the basic layout. Also, make sure you save the file as a .xspf file, otherwise all of this will be for nothing. The playlists can be infinitely long, so it’s just a matter of how many songs you can fit onto your server.

Now for embedding your music player into your site. This part is kind of hard, so follow along. Place this code wherever you want the player to end up in your page. This is the basic layout for the Extended version:

<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="168">

<param name=”allowScriptAccess” value=”sameDomain”/>

<param name=”movie” value=”http://www.example.com/folder/xspf_player.swf”/>

<param name=”quality” value=”high”/>

<param name=”bgcolor” value=”#E6E6E6″/>

<embed src=
“http://www.example.com/folder/xspf_player.swf?
playlist_url=playlist.xspf”

quality=”high” bgcolor=”#E6E6E6″

name=”xspf_player” allowscriptaccess=”sameDomain”

type=”application/x-shockwave-flash”

pluginspage=”http://www.macromedia.com/go/getflashplayer”

align=”center” height=”168″ width=”400″></embed>

</object>

Again, you are going to have to change some things to make this work on your site. First, change all the ‘example.com/folder/’ folder locations to the actual location on your web server. Next, where you see the embed statement you will notice that after you write the location of your xspf_player.swf there is a question mark. This is where the parameters for the player go. Here is a nice list of all the parameters and what they do.

• playlist_url : the URL of the xspf file to load
• autoplay : boolean value that make the music start without the initial user click
• autoload : boolean value that makes the playlist load without the initial user click
• repeat_playlist : boolean value that makes the playlist repeat after the end of the last song
• playlist_size : number of tracks to limit
• player_title : the text to replace the player’s defaults
• song_url : the URL of a single MP3 you want to load.
• song_title : the text to replace the player’s defaults

You should only use the last two parameters if you are only loading one song. This saves the hassle of writing an XSPF file for a single song. To use more than one parameter on the player, separate each parameter by an ‘&’ and make sure that there are no spaces in between.

So now you have yourself a little music player on your site with whatever music you like and you think to yourself, “Yeah it’s great that people can hear my great taste in music on my site, but I want them to hear it no matter what site they visit.” Well, there is a solution: the XSPF Music Player Sidebar.

Fabricio Zuardi really is a genius. Not only did he make it incredibly easy to put a Flash-based music player on your site, but he also made it incredibly easy to put that music player on a Firefox sidebar to allow a person to listen to music as they browse. All you need to give your visitors this ability is a little JavaScript. Just place the following code in between your <head> tags:

<script language="JavaScript">

<!–

function addMozillaPanel(url) {

if¹ {

window.sidebar.addPanel (“My Music Player “,url,”");

}

else {

var rv = window.confirm (“Music Player Sidebar requires a compatible browser. Do you want to upgrade?”);

if (rv)

document.location.href=”http://www.getfirefox.com”;

}

}

–>

</script>

Then just place the following line of code wherever you want a link that adds your player to their sidebar:

<a href="javascript:addMozillaPanel('http://www.example.com/folder/xspf_player.swf? playlist_url=playlist.xspf&repeat_playlist=true')">Add my player to your Firefox sidebar</a>

Again, as with the embedding, you will have to go through and replace the location of the xspf_player.swf with the location on your web server. And again, you can add or remove parameters after the question mark and place &s in between each parameter without any spaces.

Once a user adds your music player to their bookmarks, all he or she has to do to get your music player on his or her sidebar is go to Bookmarks and then click on ‘My Music Player’. It’s just that simple.

By Wyatt Cready-Pyle a 16 year old from Pittsburgh, PA.

1. typeof window.sidebar == “object”) && (typeof window.sidebar.addPanel == “function” [↩]