Adding Audio Player to ModX

From MODx Wiki

This is a guide for enabling the use of the XSPF Flash-based MP3 player in a MODx environment. Credit goes to doze for getting this to work. PHP XML file generation is by sapincher .

Adding the XSPF Web Music Player to your ModX site

Downloading and Installing the Player

• Visit Sourceforge to download the XSPF Player.

• Upload the player to your webserver and embed the player on any page you want it to appear, using the Insert/edit embedded media button on the content editor. A good place for this to be uploaded on your server would be assets/xspf_player.

Creating an XML Playlist

• Create an XML Playlist, following the structure seen below.

<?xml version="1.0" encoding="UTF-8"?>
<playlist version="0" xmlns = "http://xspf.org/ns/0/">
  <trackList>
   <track>
    <location>[(site_url)]assets/songs/machinae supremacy - great gianna sisters.mp3</location>
    <image>[(site_url)]assets/images/albumcovers_promo.jpg</image>
    <annotation>Machinae Supremacy - Great Giana Sisters</annotation>
   </track>
   <track>
    <location>[(site_url)]assets/songs/machinae supremacy - sidology episode 1 - sid evolution (128kbs).mp3</location>
    <image>[(site_url)]assets/images/albumcovers_jng.jpg</image>
    <annotation>Machinae Supremacy - Sidology Episode 1</annotation>
   </track>
   <track>
    <location>[(site_url)]assets/songs/machinae supremacy - sidology episode 3 - apex ultima (128kbps).mp3</location>
    <image>[(site_url)]assets/images/albumcovers_dxm.jpg</image>
    <annotation>Machinae Supremacy - Sidology Episode 3</annotation>
   </track>
   <track>
    <location>[(site_url)]assets/songs/machinae supremacy - Sidology 2 Trinity.mp3</location>
    <image>[(site_url)]assets/images/albumcovers_redue.jpg</image>
    <annotation>Machinae Supremacy - Sidology 2 Trinity</annotation>
   </track>
  </trackList>
</playlist>

• You will also need to upload your mp3 files (and images if you are using them) to the directory in which you told the XML file to look for them. If using the above example, you would upload your mp3 files to assets/songs and your cover images to assets/images.

Embedding the XSPF Player in Your Site

• When you embed your document into your page, it should look like the following:

<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="[(site_url)]assets/xspf_player/xspf_player.swf"/>
        <param name="quality" value="high"/>
        <param name="bgcolor" value="#E6E6E6"/>
        <param name="wmode" value="transparent"/>
    <embed src="[(site_url)]assets/xspf_player/xspf_player.swf?playlist_url=[~17~]"
    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" wmode="transparent"> </embed>
</object>

• Please note, that this line :<embed src="[(site_url)]assets/xspf_player/xspf_player.swf?playlist_url=[~17~]" has a playlist_url of [~17~]. This is because 17 is the ID of the playlist document.
• Also note that the lines <param name="wmode" value="transparent"/> and wmode="transparent" were added to allow a drop down menu to go over top a Flash element. If you don't have a drop down navigation, or it doesn't extend over the Flash area, then you can remove those lines.

PHP-based XML Generation at Runtime

• It is also possible to dynamically generate a playlist using PHP, so one can simply drop an MP3 file into a folder and let it show up on the XSPF player. In the "assets/songs" folder, create a file named index.php. Inside of that, place:

<?php
$website = "http://your-website-here.com/";
$filetype = "*.mp3";
$filelist = shell_exec( "dir {$filetype} /a-d /b" );
$file_arr = explode( "\n", $filelist );
array_pop( $file_arr ); // last line is always blank
$xml_str = '<?xml version="1.0" encoding="UTF-8"?>
	<playlist version="0" xmlns="http://xspf.org/ns/0/">
	<trackList>
';
foreach($file_arr as $key => $value){
	$value=substr(stripslashes($value),0,-4);
	$song_name_exp = explode("_",$value);
	$artist = $song_name_exp[0];
	$title = $song_name_exp[1];
	$xml_str .= '<track><location>'.$website.'assets/songs/'.$value.'.mp3</location>';
	if(is_file('../images/'.$value.'.jpg')){
		$xml_str.='<image>'.$website.'/assets/images/'.$value.'.jpg</image>';
	}
	$xml_str.= '<annotation>'.$artist.' - '.$title.'</annotation></track>'."\n";
}
$xml_str.='</trackList></playlist>';
echo $xml_str;
?>

• Note that this relies on the naming convention of your-website-here.com/assets/songs/The Artist_The Title.mp3 . Thus, the system will break if underscores are used in song artists/titles!
• If there is album art associated with a song, place it in the assets/images folder with the same filename as the song itself, but with a .jpg extension instead of an .mp3 .
• Another limitation of this feature is the use of shell_exec(), which requires a Linux-based server to utilise.
• You must also tell XSPF to use this file as the playlist_url, so replace "[~17~]" in the previous example with "[(site_url)]assets/songs".