Getting the XSPF Web Music Player to Work with DNN

I've been banging my head against the monitor for a while trying to get Fabricio Zuardi's XSPF Web Music Player to work under DNN with no luck. That was until I read this thread on the DNN forums and found out that IIS has to be configured to serve .xspf files in order for this to work.

The XSPF Web Music Player is a flash-based web application that uses xspf playlist format to play mp3 songs. XSPF is the XML Shareable Playlist Format. The software is written in Actionscript 2.

Here's the process that I went through to get the player to properly stream music on my site:

1. Download the version of the player you want to use. I went with the extended version so that visitors can see the name of all the tracks in our playlist.
2. Upload the .swf file to a location on your server and note the full path to the file. You'll need this later.
3. Upload the MP3 files to a location on your server that is web accessible and note the full path to these files. This can be a subdirectory off of your portal directory, for example: http://www.yourdomain.com/portals/0/MP3.
   
4. Since we went with the extended version of the player, I had to create an XSPF playlist file for the player to read. The format is very simple. Visit the Quick Start page for a summary of the syntax. I got tripped up initially with how spaces and special characters have to be encoded in the XSPF file. I had spaces and apostrophes in the names of my MP3 files so the file was invalid. I solved this by just giving simple names to the files. You'll want to Validate your XSPF file to make sure it's correct.
5. Log into your DNN portal and create a page that will house your MP3 Player. I added a standard Text/HTML module and set it to not display the container. Edit the text of this module and switch to the Basic Text Box entry mode in the editor. Copy and paste the code below but change the YOURDOMAIN/PATH/YOURPLAYLIST references as appropriate. You can also change the width and height if you would like.
   

   <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0,0" id="xspf_player" width="300" align="middle" height="320">
   <param name="allowScriptAccess" value="sameDomain">
   <param name="movie" value="http://www.YOURDOMAIN.com/PATH/xspf_player.swf?playlist_url=http://http://www.YOURDOMAIN.com/PATH/YOURPLAYLIST.xspf&amp;autoplay=true">
   <param name="quality" value="high">
   <param name="bgcolor" value="#e6e6e6">
   <embed src="value=" playlist_url="http://http://www.YOURDOMAIN.com/PATH/YOURPLAYLIST.xspf&amp;autoplay=" true="" quality="high" bgcolor="#e6e6e6" name="xspf_player" allowscriptaccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" width="300" align="center" height="320"></embed>
   </object>

   
   
6. At this point, you can save the update to the module and view the page to see if you've got anything. At first, the player rendered on the page, but it would not load my playlist. If this is the case for you, you should make sure that IIS is set to serve .xspf files. Since my host provides a Plesk control panel, I'll describe how to do this in Plesk.
7. Log into your Plesk control panel.
8. Click on your domain.
9. Click on the Web Directories icon.
10. 
    In my version of Plesk, there is a "MIME Types" tab at the top of the screen. Click on that tab.
    
11. Click on the "Add New Mime Type" icon. and enter ".xspf" as the Extension and Choose "Custom" and type "application/xspf+xml" for Content (without the quotes).
12. Restart your IIS or Application Pool.
13. Test your page again. This time, your player should come up and start streaming your music.

I hope this helps.