How to Add the XSPF Player in Your Website

If you have a site, you might want customize your website a little more by adding music. One particularly popular way is to add a music playlist, a streaming device that allows users to upload music from their desktop to their chosen host so that it can be played from their site.

A common playlist is the XSPF (XML Shareable Playlist Format) player. A talented programmer named Fabricio Zuardi invented this player with a very basic, rudimentary flash interface and Actionscript 2. It plays the mp3s in the lists by reading the XSPF file.

There are three different kinds of the XSPF players:

1. The Extended version: This consists of the player’s controls, the list of songs, the album cover, and the current track playing.
2. The Slim version: This is a simpler and smaller version,which consists of the player’s controls and current track playing.
3. The Button version: This is a much simpler and smaller version. Obviously, it’s a button where you click once to play the player and click again to stop.

First, download the type of XSPF player you want by going to this site: http://musicplayer.sourceforge.net/ Download the chosen file to your desktop and then upload it to your server. Open notepad and copy and paste this code below:

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

        <track>
            <location>
                http://www.example.com/song.mp3
            </location> 
            <image>
                http://www.example.jpg
            </image> 
            <annotation>
                Name of Track
            </annotation> 
        </track> 

        <track> 
            <location>
                http://www.example.com/song.mp3
            </location> 
            <image>
                http://www.example.jpg
            </image> 
            <annotation>
                    Name of Track
            </annotation> 
        </track> 

    </trackList> 
</playlist> 

Replace the image names and song titles with the proper words. When you want to add more songs, just copy:

<track >
    <location>
        http://www.example.com/song.mp3
    </location> 
    <image>
        http://www.example.jpg
    </image> 
    <annotation>
        Name of Track
    </annotation> 
</track >

Make sure you do the above before the </trackList>. You can put as many songs as you want (so long as you don’t exceed the bandwidth of your server). When you are done, save this as .xspf and upload it to your server. Don’t forget to upload your songs into the <em>same</em> directory in your server.

To embed the player into your site, place this code into your HTML file.

Basic Code for Extended Version:

<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.example.com/xspf_player.swf"
    /> 
    <param 
            name="quality" 
            value="high"
    /> 
    <param 
            name="bgcolor" 
            value="#000000″
    /> 
    <embed 
            src="http://www.example.com/folder/xspf_player.swf?playlist_url=playlist.xspf" 
            quality="high" 
            bgcolor="#000000″ 
            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> 

Change the properties to fit your needs. Be sure to change the:

   
<embed 
    src= http://www.example.com/folder/xspf_player.swf? 
    playlist_url=playlist.xspf …

to the actual URL to where the XSPF and .swf file is located.

Quick Lesson:

• playlist_url: the URL of the xspf file to load
• autoplay: boolean value that makes the music start without the initial user click
• autoload: boolean value that makes the playlist load without the initial user click
• repeat_playlist: boolean value that makes the playlist repeat after the end of the last song
• playlist_size: number of tracks to limit
• player_title: the text to replace the player’s defaults
• song_url: the URL of a single MP3 you want to load.
• song_title: the text to replace the player’s defaults

The items in the list above are called parameters. Use the last two if you’re just uploading one song. That way, you don’t have to write an XSPF file for just a single song. Place the parameters right after the question mark of http://www.example.com/folder/xspf_player.swf?

If you use more than one parameters, separate the two with an &.

For example:

http://www.example.com/folder/xspf_player.swf?song_url=”www.irock.com/yeah.mp3″&song_title=”Yeah!”&autoplay=1

The XSPF Music Player Sidebar allows you to play whatever music you want from your playlist from wherever. Meaning, one can listen to your music even if they go to another site by placing your music player into their sidebar.

Place these in between your <head> tags:

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

Then add this code to wherever you want the link to show up so the user can have your music in their sidebar:

<a 
    href= "javascript:addMozillaPanel('http://www.example.com/folder/xspf_player.swf?playlist_url=playlist.xspf&repeat_playlist=true')"> 
    Add my player to your Firefox sidebar! 
</a> 

The coolest thing about this is that the users can add your music player to their favorites and they can listen to the player anytime.

Don’t forget to edit the properties and place the real location to your .swf and .xspf file!

Add or remove parameters if you wish, or leave the default. Aside from that, have fun!