Embedding Music With Flash And XSPF Web Music Player

Ready to go? Great! Here are the steps to add music to your web page with Flash and the XSPF Web Music Player.1. Download my enhanced version of the XSPF Web Music Player software. Just follow the instructions on that page to fetch a zip file that contains both the “extended” version, which displays a playlist, and the “slim” version, which just shows the currently playing song.

2. Open up the “compressed folder” (zip file) you’ve just downloaded. Extract it to your hard drive with “extract all files,” then open the folder you’ve extracted it to. There will be two sub-folders, “Extended” and “Slim.” Open the one you prefer. Now locate the file xspf_player.swf (or xspf_player_slim.swf). Windows users probably won’t see the .swf part of the name – just don’t use the .as or .fla file. If you’re not sure which is which, right-click and pick “Properties” to show more complete information.

3. Upload xspf_player.swf (or xspf_player_slim.swf) to your website and drop it in the same folder with your MP3 files. (You could put it somewhere else, but this tutorial will assume it is in the same folder.) Usually you can do this by dragging and dropping to your favorite file transfer program.

4. With Notepad or another text editor, create a simple “playlist” file and save it with the name: test.xspf

The playlist file should look like this. Notice the title element, which should name your band and album (or any other heading you consider appropriate), the location element for each track, which should specify the name of the .mp3 file (you can use a full URL here if the .mp3 file is not in the same folder), and the annotation element for each track, which should give the name of the song so the user can see what they are listening to. You can also specify an image element, which provides a URL to an image to be displayed in the box to the left of the song (in the larger “extended” player).

<?xml version="1.0" encoding="UTF-8"?>
<playlist version="1" xmlns = "http://xspf.org/ns/0/">
<title>My Band Rocks Your Socks</title>
<trackList>
<track>
<location>a.mp3</location>
<image>songaimage.jpg</image>
<title>Name Of Song A</title>
</track>
<track>
<location>b.mp3</location>
<title>Name Of Song B</title>
</track>
<track>
<location>c.mp3</location>
<title>Name Of Song C</title>
</track>
<track>
<location>d.mp3</location>
<title>Name Of Song D</title>
</track>
</trackList>
</playlist>

5. Upload the playlist file, test.xspf, to your website as you would any other file.

6. Add the following code to your web page. This tutorial assumes your web page is in the same folder with your playlist file and xspf_player.swf:

<object type="application/x-shockwave-flash" width="400" height="170"
data="xspf_player.swf?playlist_url=test.xspf">
<param name="movie" value="xspf_player.swf?playlist_url=test.xspf" />
</object>

Note: I’ve set the width and height as suggested on the XSPF Web Music Player web page, but you can set them larger if you wish. If you are using the slim player, you’ll set the height attribute quite a bit lower.

7. Refresh the page in your browser. Your music player is up and running!

If It Doesn’t Work

1. Make sure you uploaded the .swf file.2. Make sure you uploaded your .xspf file. You did make one, right? If not, go back and read the instructions and do a thorough job.

3. Make sure you uploaded your .mp3 files.

3. If you are sure your HTML is correct and your browser shows the player but refuses to play the songs, it is possible that your web server doesn’t allow files with a .xspf extension to be served. You can work around this by renaming your .xspf file to .txt. If you do so, you must change .txt to .xspf in both places where it appears in the object element.

Fine Tuning: Repeat Play, Autoplay, Shuffle Play, Images and Autoresume

Why doesn’t the music play immediately? Because, by default, XSPF Web Music Player doesn’t start playing until the user asks it to by clicking the “Play” arrow. A lot of people think this is a good thing because unwanted music is annoying and can get people in trouble at work or school. But if you really want the music to start right away, add &autoplay=1 to the end of the data and value URLs above, like this: xspf_player.swf?playlist_url=test.xspf&autoplay=1

If you just want to load the playlist (your .xspf file) before the user clicks on the player, you can do that too:

xspf_player.swf?playlist_url=test.xspf&autoload=1

You can also repeat the playlist (or repeat the song, if the playlist contains only one song) by setting repeat_playlist to 1. And you can limit the total number of songs played in this way by setting playlist_size. You can even set the player to automatically shuffle the playlist order by setting shuffle to 1 (only available with my version, or the Lacy Morrow version mine is based upon). All of these parameters can be used together – just be sure to separate them with & and set them the same for both data and param name="movie".

A new feature you’ll find in my enhanced version of the player is the autoresume option. This option allows the music to resume from the same point when the user follows links from page to page on your site. Since the old page must be unloaded before the new one is loaded, there is a slight gap. But it’s a big improvement over music that starts over and over at the beginning. Just add &autoresume=1 to the end of the data and value URLs above, like so:

xspf_player.swf?playlist_url=test.xspf&autoplay=1&autoresume=1

Note that I have also specified autoplay here. Most users who want autoresume will probably also want autoplay, but you can still have the autoresume behavior without autoplay. Once the user does decide to manually start the music playing, the autoresume behavior kicks in as they move from page to page.

If you are using autoplay, I recommend also using autoresume, because it doesn’t just remember what’s playing – it also remembers that the user has clicked “stop” or “pause” and doesn’t start the music again as the user moves from page to page. The more you honor your visitor’s choices, the more they will like your site.

What about that box to the left of your song in the “extended” player? As I mentioned, you can put an image corresponding to each song in that box by adding an image element to each track element in your XSPF file.

Alternatively, if you have a single image that’s appropriate for all of your songs, you can set one up via the main_image parameter. In this example, the file cover.jpg is fetched from the same folder where the page is located:

<object
type="application/x-shockwave-flash"
width="600" height="200"
data="xspf_player.swf?playlist_url=playlist.xspf&main_image=cover.jpg">
<param
name="movie"
value="xspf_player.swf?playlist_url=playlist.xspf&main_image=cover.jpg" />
</object>

If your image is larger than the box, it will be automatically resized to fit.