XSPF Player Solutions

Although it is Flash-based, I have found xspf_player.swf to be one of the most versatile mp3 players out there. It may not be the easiest to set up, but once it’s in place, you are rewarded with total control. Its parameters include, background-color, text-color, autoplay, autoload, shuffle, and much more. Plus, it supports multiple playlists per page! This example, as well as the code snippets below, are taken from the existing player/playlist at FrameOfReferenceJazz.com. This illustrates another perk of this particular player– you can import playlists from anywhere on the web! All you need for that is the HTML portion with fully-qualified URLs. But I expect that you’ll want to promote your own audio, so simply replace my URLs with yours. By the way, my purpose here is to create a one-stop, concise, Cut-&-Paste-ready, online instruction manual, so feel free to contribute.


1. Download Player. First of all, find yourself an up-to-date version on the in’rnet. Try xspf-player.com. I went there today and got a nice beta version–3.9. There is also a tutorial page, which was fairly helpful, but it still left me with questions.
Unzip your dowloaded version and put the folder somewhere logical. Mine is here: “http://www.framofreferencejazz.com/audio/xspf_player_beta/
That takes care of the player.

2. Playlist. Now we need a playlist. Create a new file in a text or coding application. I love Coda, but even TextEdit will work. The format should look like this (no need to close the <?xml> tag):

<?xml version="1.0" encoding="UTF-8"?>
<playlist version="1" xmlns = "http://xspf.org/ns/0/">
<title>Sample Playlist</title>
<annotation>"Song Title" Artist Name</annotation>

Note: Be sure to double check the characters after using Cut & Paste. I have often had to retype them in order for them to function properly. However, I have tested them out here and they seem to work fine.
Note: Track images should be about 130px by 130px.

Save your new playlist with the extension .xspf. Simply force the extension and don’t worry that most apps won’t recognize it– the xspf_player will!

3. CSS. Since the HTML code can get rather long, it might be helpful to start with a little CSS. The following div class will surrond the rest of the code, making it easier to Cut & Paste the entire xspf_player wherever you desire. Paste this code into your style.css:

.xspf-wrap {
    width: 400px; 
    border: 1px solid #373737;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px; 
    padding: 3px;
    background: #272727;

Note: “400px” is the default width of the xspf_player. The 2px padding gives it nice border which will blend in with the player’s inner borders. Later, you can elaborate on this class in order to position it however you like. Mine is floated right with defined margins.

4. HTML. Now we’re ready for the tricky part. The following code is exactly the same as what is placed at the top of the page. To implement your own, simply replace my URLs with your own. Notice that much of the same info appears twice. And they must mirror each other or it won’t work.

<div class="xspf-wrap">
<object type="application/x-shockwave-flash" data="http://www.frameofreferencejazz.com/audio/xspf_player_beta/xspf_player.swf?playlist_url=http://www.frameofreferencejazz.com/audio/xspf_player_beta/forj_playlist.xspf&autoplay=0&autoload=1&repeat_playlist=1&shuffle=1&bg_color=454545&txt_color=E6E6E6&volume_level=80" width="400" height="170"><param name="allownetworking" value="internal" />
<param name="movie" value="http://www.frameofreferencejazz.com/audio/xspf_player_beta/xspf_player.swf?playlist_url=http://www.frameofreferencejazz.com/audio/xspf_player_beta/forj_playlist.xspf&autoplay=0&autoload=1&repeat_playlist=1&shuffle=1&bg_color=454545&txt_color=E6E6E6&volume_level=80" />
<param name="allowScriptAccess" value="never" />
<param name="enableJSURL" value="false" />
<param name="enableHREF" value="false" />
<param name="saveEmbedTags" value="true" />
<param name="quality" value="high" />
<param name="wmode" value="transparent" />

Note: A great explanation of the exact formatting for this can be found at xspf-player.com, along with a complete list of parameters. Stick to “1“s and “0“s for the boolean values, instead of “true” and “false.”

5. Resizing. If you plan on using track images, the minimum height should be 170px. However, I originally came across xspf_player while searching for something low-profile. An older version had a “slim” model, but you can simply resize this one to get the same effect. 17px is the minimum height in this case. I just placed this variation into a local recording studio web site, BerkleySound.com.

6. Display Only on Home Page. A recent challenge was to place this slim version in the header, above the main menu, but for it to only be displayed on the Home page. There seemed to be several solutions out there, but luckily the one that worked for me was the simplest. Open up the header.php file and select your favorite place to put this:

if (is_home())
echo '<div>STEP 4 GOES HERE</div>';

Note: Earlier versions of the xspf_player required additional code in order to work across all browers, such as an additional <embed> tag, and even some javascript. I got sucked into it all for a moment before I realized there’s a beta way! View my results at BerkleySound.com

Leave a Comment