Webmastering and HTML Articles/Tutorials

How to stream music from your website with a full
streaming Flash MP3 player utilizing XML playlists
Article by Tom Cammarata (aka Phzzz; aka Nunzio390; aka Scruffy) for inclusion at www.suggest-a-fix.com

This article will show you how to stream MP3 music on a web page using an MP3 Flash Player (provided for download here) that utilizes XML playlists. This will allow MP3 files to be immediately streamed as they are played, with no wait time or buffering, and will work perfectly in all major browsers, including MSIE, Netscape/Mozilla, Google Chrome, Safari, and Opera browsers.



Working Example:

Multiple Track Streaming Flash MP3 Playlist Example
Click the PLAY button above to start the stream and hear the first song in the list. You can then either let it play through or simply click on any song in the list to jump to that song. A volume control is included, along with a seek bar to advance anywhere within a song.




Instructions for creating the XML playlist file:

1. Save your XML playlist file (see instructions on creating it below) and the Flash Player (see instructions on downloading it below) to the same directory where you will be playing the music from, or you can reference a music directory of a remote URL where you know a music file already exists, within your XML playlist file.

2. Open up a text editor such as Windows Notepad or JGsoft's EditPad Lite (as I use). Type in everything you see displayed in red in the box below, leaving space for adding the songs/tracks that will be played...

<?xml version="1.0" encoding="UTF-8"?>
<playlist version="1" xmlns="http://xspf.org/ns/0/">
<trackList>

Leave space here to type in the songs/tracks that will be played.

</trackList>
</playlist>


3. Now start adding your tracks/songs! Type in the FULL path to the Web Address (URL) of each of the MP3 music files you want to include in the playlist, along with the name of the artist(s), and title of the song(s), like you see it done in the box below. The first <track> </track> example in the box below is just an "instructive" track example. The second <track> </track> example references the location of an actual MP3 file/song that is located here in the articles section of Suggest-A-Fix...

<?xml version="1.0" encoding="UTF-8"?>
<playlist version="1" xmlns="http://xspf.org/ns/0/">
<trackList>

<track>
<creator>Name of Artist</creator>
<title>Title of Song</title>
<location>http://www.whatever-domain-the-song-is-hosted-at.com/mp3-file-location/name-of-the-mp3-file.mp3</location>
</track>

<track>
<creator>The Eagles</creator>
<title>Hotel California (Live- 1994)</title>
<location>http://www.suggest-a-fix.com/articles/html/Eagles - Hell Freezes Over (1994)/06 Eagles - Hotel California.mp3</location>
</track>

</trackList>
</playlist>


In the 2nd track example above, this is the actual name of the MP3 file:
06 Eagles - Hotel California.mp3

This is the full URL and directory of where it's located:
http://www.suggest-a-fix.com/articles/html/

Just keep adding as many tracks as you'd like to the XML playlist file. There is no limit to how may songs you can include in an individual playlist. If the number of tracks grows long, you can always use the scrollbar to the right of the player to see them all and/or click/jump to any in the list.

Save the XML playlist file with an .xml (Extensible Markup Language) extension.
Example: playlist1.xml

Once you have created your .xml playlist, upload it AND the MP3 Flash player file (instructions for download below) to the same directory. Both the XML Playlist file and the Flash Player need to be in the same directory at your server. As I said earlier, the actual MP3's in your track lists within your XML playlist file can either be referenced from your server OR from a music directory of a remote URL where you know music files already exist.




The code needed for embedding the playlist into a web page:

Once the 2 necessary files, the Flash Player (mp3player.swf), and your XML Playlist file, have both been uploaded, insert this code into whatever part of your web page you want the Player to display...

<object data="http://THE-URL-WHERE-YOUR-2-FILES-ARE-UPLOADED-TO/mp3player.swf?autostart=false&playlist=http://THE-URL-WHERE-YOUR-2-FILES-ARE-UPLOADED-TO/THE-NAME-OF-YOUR-PLAYLIST-FILE.xml" height="200" type="application/x-shockwave-flash" width="300"><param name="movie" value="THE-URL-WHERE-YOUR-2-FILES-ARE-UPLOADED-TO/mp3player.swf?autostart=false&playlist=http://THE-URL-WHERE-YOUR-2-FILES-ARE-UPLOADED-TO/THE-NAME-OF-YOUR-PLAYLIST-FILE.xml" /></object>

In the code above, autostart settings determine if the music starts playing automatically or not. The autostart values of "false" indicated TWICE in bold blue in the above code can be changed if needed, to true if you want the player to automatically start playing without user intervention. I feel that's inadvisable because you are FORCING the music on a site visitor that way and in my opinion, that tends to be VERY annoying when I visit a site. I want "control" over music at any site I visit. If you want it not to start automatically (preferred), and you would rather have the site visitor press the play button to start the music/audio, then keep BOTH those values false. IMPORTANT: BOTH autostart values must be changed to identical "true" or "false" values, to ensure that the music is delivered in the same way in all major browsers.

This is the WORKING code I used to create the working Playlist example at the very top of this article, so reference it as well as the example code directly above...

<object data="http://suggest-a-fix.com/articles/html/mp3player.swf?autostart=false&playlist=http://suggest-a-fix.com/articles/html/playlist1.xml" height="200" type="application/x-shockwave-flash" width="300"><param name="movie" value="http://suggest-a-fix.com/articles/html/mp3player.swf?autostart=false&playlist=http://suggest-a-fix.com/articles/html/playlist1.xml" /></object>




Download the Flash MP3 Player (needed):

Click here and save the RAR file: mp3player.rar

Within the RAR file is mp3player.swf (the actual Flash Player you will need). Once unarchived from the RAR file, upload it AND your XML Playlist file to the same directory at your server.
NOTE: you will need an unarchiving utility to extract mp3player.swf from mp3player.rar, so you can use either "7-Zip" (for Windows) or "The Unarchiver" (for Mac OSX), both available via links HERE.

ENJOY!