• Main Menu
  • 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!

     

    Got Something To Say:

    Your email address will not be published. Required fields are marked *

    10 comments
    1. Andy

      2 June, 2012 at 2:10 pm

      For the XSPF Player, does anyone know code how to increase the font size?
      It seems too small to me. Thank you.

      Reply
    2. teece

      8 February, 2012 at 1:43 am

      This is at least the 5th walkthrough I’ve attempted to use and this player still doesn’t work. I have the extended version, will this only work if I’ve already hosted my site? I am using “xspf_player.swf” and “AllAlbums.xspf”, and at least it got me farther than other useless time-wasting tutorials. I have the loading screen working, but a playlist won’t load. Help plz?

      Reply
    3. Pete

      29 September, 2011 at 9:30 pm

      I have uploaded player html code and the xspf file. the player works but for some reason I have 114 tracks in my playlist (none of mine – dont know where these songs have even come from)?? 

      Reply
    4. surround

      30 May, 2011 at 4:45 pm

      hello
      I have embedded the player successfully,  but as I right click on it there is “download this song” option. I do not want it to be there. Is there opportunity to remove it from the shortcut menu?

      Reply
      • marlon

        30 May, 2011 at 6:57 pm

        Surround.. this might help:

        Try to put this in the XSPF HTML:

        <param name=”menu” value=”false” />

        Let me know if this helps or not.. thanks

        Reply
        • surround

          30 May, 2011 at 8:54 pm

          Thanks for your reply but it doesn’t help. I’ve put your line between object tag(I ‘ve tried putting it in different location between  ‘object’ ):
          <object type=”application/x-shockwave-flash” width=”400″ height=”170″
          data=”http://path…/xspf/lap.mp3&amp;song_title=soloning&amp;repeat_playlist=1″><param name=”menu” value=”false” />
          <param name=”movie”
          value=”http://path…/xspf/lap.mp3&amp;song_title=soloning&amp;repeat_playlist=1″ />
          </object>

          Reply
          • marlon

            30 May, 2011 at 11:12 pm

            can you try not to put it in between any other objects or codes? Please update me on this, so that we can go on and find a different workaround. Thanks

            Reply
            • surround

              31 May, 2011 at 12:58 am

              Wherever I put this line it doesn’t work. The page I build uses HTML code so I should embed in between some tags. I put it in body tag, div tag, even beyond html tag, it doesn’t help.
              thanks

            • surround

              7 June, 2011 at 2:36 pm

              May anybody help with the issue? Is it possible to block the right click menu?

            • Keith

              25 April, 2012 at 1:52 am

              There is a way to disable it but you will need Adobe Flash to do so. You will need to OPEN the AS (ActionScript) file and scroll towards the bottom of the file is where I found some code about allow download and I just deleted it and saved. Then you will need to re-publish the FLA file to make a new SWF file. Hope that helps.

    Web Browsing
    } 244 queries in 0.473 seconds.