StephenJungels.com :: Open source :: Articles :: Flash MP3 How-to

How to publish a live mp3 playlist in your web page

Music embedded in a web page has not always been a popular feature, but now, thanks to a free program by Fabricio Zuardi, it is possible to use Adobe Flash to embed music attractively and without annoying your readers. Because Flash technology is so widely deployed, users of all modern browsers and operating systems will be able to hear your music.

This document describes how I installed the Flash-based XSPF Web Music Player. To follow these instructions you need access to a web server and basic web publishing skills. You should be able to get everything working in less than half an hour. Or you can take a different approach by automating the entire process with the Plait command line jukebox.

Getting XSPF Player

You can get an idea of what an embedded Flash MP3 player will look like by clicking on this link to my example page. If you like what you see there, start by downloading the latest version of the player from Sourceforge. The player is distributed in a zip file which you will have to unpack. Once you have done so, copy the file xspf_player.swf to a directory on your web server.

Configuring the player: the web page

In order to make the player play the music of your choice, you need to create two text files that control its behavior and then make sure that the mp3 files containing the music are also available. In this example all the files will be stored in the same directory on the server where xspf_player.swf was stored, but in more complex installations that would not be necessary.

A minimal web page which displays the Flash music player looks like this:

<html>
<head>
<title>Flash MP3 Playlist</title>
</head>

<p> This is a test of the Flash MP3 player
</p>

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

</body>
</html>

Insert this text into a file named index.html and save it in your web directory. If you have a preexisting page to which you would like to add the Flash music player, the only part you need is the block of text enclosed by the "object" tags.

The HTML code used here will work with all modern browsers. If you also want to support older browsers like Netscape 4.7 that use the "embed" tag, Aldrin Hanley's page has alternate instructions. The statistics I looked at show that Netscape 4.7 is now a small fraction of one percent of all browsers in use.

It is possible to customize this code, but not really necessary. At the two points where the text "playlist_url=playlist.xspf" occurs, it is posssible to substitute any valid URL for the text "playlist.xspf", which defines the location of the playlist file which we will use to define a list of songs to be played. You might do this if your playlist was stored on another server, for example, or in another directory on your own server. In this example, the playlist will be stored in the same directory as the web page, so the code is correct as given.

The playlist (XSPF) file

The playlist file is in an open source format called XSPF, which is described in detail on the XSPF web site at http://xspf.org/quickstart.

However, the XSPF player does not pay attention to all the tags defined by XSPF, so we will explain the few tags you need by example. A minimal playlist looks like this:

<?xml version="1.0" encoding="UTF-8"?>
<playlist version="0" xmlns = "http://xspf.org/ns/0/">
  <title>My Music</title>
  <trackList>
   <track>
    <location>song1.mp3</location>
    <image>song1.jpg</image>
    <creator>Artist 1</creator>
    <title>Song 1</title>
   </track>
   <track>
    <location>song2.mp3</location>
    <image>song2.jpg</image>
    <creator>Artist 2</creator>
    <title>Song 2</title>
   </track>
  </trackList>
</playlist>

This file defines a playlist named "My Music" which contains two songs, song1.mp3 and song2.mp3. There is album art for each song in the files song1.jpg and song2.jpg. The music player will display the creator and title of each song in the playlist.

Naturally, you will have to customize this file to reflect the music you actually want to play, by substituting the names of real artists and songs for "Artist 1," "Song 1," and so on. Similarly, "song1.mp3" should be replaced by the name of an actual MP3 file. As you make your changes, keep the following rules in mind:

After you have customized the playlist file to suit your needs, save it in the same directory on your server where index.html is stored, under the name playlist.xspf. Important note: if you modify this file after loading the embedded MP3 playlist at least once, you will have to clear your browser cache or possibly even rename the file and the references to it, before your browser will register the changes you make.

The moment of truth

Finally, you need to make sure that the mp3 files and, optionally, the album art, in your playlist are stored in the same directory as the rest of the files. They must be named exactly as in the XSPF file (in the example, song1.mp3 and song2.mp3).

Let us say that the directory on your server where you have been saving the files is named "mp3" and your server is at www.example.com. If you now point your browser to

http://www.example.com/mp3/

you should see the Flash music player successfully embedded in a web page.

Extensions

The player can be customized in several ways by adding additional variables to the end of the two points in the object block that define the location of the player. For example, if you substitute the following for the object block in your index.html file, autoplay and repeat_playlist will be enabled:

<object type="application/x-shockwave-flash" width="400" height="170"
data="xspf_player.swf?playlist_url=playlist.xspf&autoplay=true
  &repeat_playlist=true">
<param name="bgcolor" value="#E6E6E6"/>
<param name="movie" 
value="xspf_player.swf?playlist_url=playlist.xspf&autoplay=true
  &repeat_playlist=true"/>
</object>

(Each line that begins with an "&" character is a continuation of the preceding line. In your index.html file, join these lines into one long line without any white space.) The XSPF Player Homepage at http://musicplayer.sourceforge.net lists additional variables that you may find useful. Keep in mind that using autoplay will make a web page obnoxious to some readers.

The width and height, here 400 and 170, are only suggested values, because the player actually will resize itself to fit into whatever size rectangle you define. If you have an especially long playlist, you can increase the height to something more appropriate. Going in the other direction, you can get a nifty mini-player effect by setting the height to 15.

If you want a music player that fills the entire browser window rather than being embedded in a web page, you can load the Flash object directly, no web page needed. In our example, the URL would be:

http://www.example.com/mp3/xspf_player.swf?playlist_url=playlist.xspf

(plug this into your browser location bar, adjusting the domain name and subdirectory appropriately). You should be able to use the player in this mode given the files you have already created on your web server.

Further reading

My Flash Video Howto describes similar techniques for embedding video in your web pages. The Plait command line jukebox generates complete web sites with embedded MP3s automatically.

Comment on this article and its topic

Google Friend Connect is going or gone so it has been turned off! Commenting will return if I find something good to replace it.


Copyright by Stephen Jungels. Written permission is required to repost or reprint this article

Valid HTML 4.01 Transitional

Last modified: Mon Apr 16 12:16:49 CDT 2012