Project: XSPF Web Music Player - Play MP3 files on your website

How to use this player

Place the file with the extension ".swf" (which is either "xspf_player.swf" or "xspf_player_slim.swf") on your web server.

This file which is essentially the media player, and will require a playlist to function.

How to create a Playlist

The player uses a xspf playlist. The basic structure of the .xspf file is as follows:

<?xml version="1.0" encoding="UTF-8"?>
<playlist version="0" xmlns = "http://xspf.org/ns/0/">
  <trackList>
   <track>
    <location>http://www.name.com/folder/song.mp3</location>
    <image>http://www.name.com/folder/picture.jpg</image>
    <annotation>Text to be displayed</annotation>
   </track>
   <track>
    <location>http://www.name.com/folder/song2.mp3</location>
    <image>http://www.name.com/folder/picture2.jpg</image>
    <annotation>Text to be displayed</annotation>
   </track>
  </trackList>
</playlist>

This file is saved with a ".xspf" extension. More information on XSPF Playlist Format is available at http://www.xspf.org

How to embed the player into a web page

Place the following code into your HTML file where you want your player to be located:

<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.name.com/folder/xspf_player.swf"/>
        <param name="quality" value="high"/>
        <param name="bgcolor" value="#E6E6E6"/>
    <embed src="http://www.name.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>

Note that - value="http://www.name.com/folder/xspf_player.swf" is the location of your player file.

Also, what you should be aware of here -
embed src="http://www.name.com/folder/xspf_player.swf?playlist_url=playlist.xspf" is the location of the ".xspf" playlist file.
Pay special attention to "playlist_url=playlist.xspf" part of this string, this is the explicit location of your playlist, and it could have been http://www.name.com/folder/playlist.xspf instead of playlist.xspf

How to add the player as a Sidebar in a Firefox web-browser

First the user will need to have the Firefox browser to use this feature. [download Firefox]
The code is written in JavaScript and should be placed within the <head> </head> tags of your web-page.
It should also be placed within HTML Comments tags ie. <!-- -->

<script language="JavaScript">
<!--
function addMozillaPanel(url)
{
    if ((typeof window.sidebar == "object") && (typeof window.sidebar.addPanel == "function"))
    {
        window.sidebar.addPanel ("Hideout 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>

Once you have included the above code in your page, you can call the function from anywhere in the body of that web-page.
Below is the code used to call the function:
<a href="javascript:addMozillaPanel('http://www.name.com/xspf_player.swf?repeat_playlist=true')">Your Text here</a>

Enjoy!

Thanks to Fabricio Zuardi.
Visit the project page on SourceForge