XSPF JUKEBOX

A fully skinnable, cutomizeable flash media player — by Lacy Morrow

This version 5.9.5 was last updated April 26, 2009. This is Flash and will not work on your iDevice.

Current skin: iTunesRandom Skin

Skin author: Lacy Morrow Download zip Download tar.gz


Description

The XSPF Jukebox is a fully skinnable Flash media player. Based on my revisions of Fabricio Zuardi’s original creation. A full featured media player, the Jukebox supports both mp3 audio and flv video parsed through an external .XSPF or .XML playlist. Custom skins combined with auto–resume and many customizable options make the XSPF Jukebox a solid choice for a Flash–based media player.

Javascript Controls

Features

  • Full Skin Customization
  • Auto–resume when user switches pages (go ahead, refresh the page to try it out!)
  • Supports .mp3 audio and .flv video
  • Playlist an single–track support
  • Shuffle/Repeat
  • Playlist Cacheing
  • Many customizeable options
  • ID3 track meta infomation support
  • Tiny imprint — only 20Kb!
  • Ability to log player usage information
  • Javascript API
  • Includes modified xplay.php to generate playlist automatically

Skins

Documentation


Easy–Install

1. Copy all of the player files to your server. Edit the first line of the xplay.php file to point to your media directory:

$media = "media";
Edit any options you wish, playlist cacheing is turned on by default.

2. Include the SWFObject javascript code into your page <head>:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js"></script>

3. Create a <div> to hold your content:

<div id="flashcontent">
  <!–– Anything here will be replaced by flash content ––>
</div>

4. Invoke the player via javascript:

<script>
  var params = {};
  params.wmode="transparent";
  params.allowscriptaccess="always";
  swfobject.embedSWF("xspf_jukebox.swf?playlist_url=xplay.php&skin_url=skins/iTunes [&param1=value&param2=value...]","flashcontent", "skin width", "skin height", "7.0.0", "", {}, params, {});
</script>

Notice the values highlighted above, you must specify valid file paths for both the playlist_url and skin_url as well as the skin width and height. You may also specify any of the optional parameters following the playlist_url.
The entire url for the .swf on this page is:
xspf_jukebox.swf?playlist_url=xplay.php&skin_url=skins/iTunes
&autoplay=true&alphabetize=true&autoload=true&autoresume=true
&main_image=images/artwork.jpg&shuffle=true&statsurl=stats.php

That’s it! The XSPF Jukebox is now installed.
Single track mode

You can also use the Jukebox to play a single .mp3 or .flv file, using the following two parameters in place of playlist_url:

Optional Parameters

Playlist Format

The XSPF Jukebox uses the XSPF (‘spiff’) open XML playlist format. A brief example follows:

<?xml version="1.0" encoding="UTF-8"?>
<playlist version="0" xmlns="http://xspf.org/ns/0/">
  <trackList>
    <track>
      <location>url of .mp3 audio or .flv video file</location>
      <creator>artist or creator of track</creator>
      <title>title of track</title>
      <annotation>used in place of creator/title if both are absent</annotation>
      <duration>number of milliseconds of track duration</duration>
      <info>url of info link</info>
      <image>url of image, overwrites main_image parameter</image>
      <purchase>url of purchase link</purchase>
    </track>
  </trackList>
</playlist>

* only <location> is required


Javascript API

A javascript interface has been added into the player to allow for extended control over the Jukebox. This feature only applies to the Flash 8 version.
Available functions are:

To control the Jukebox using Javascript, make sure that you have an id set in the object and embed tags for the embed script. To call a function, use the format:
window.document.xspfJukeboxt.playTrack();
For example:
<a href="javascript:window.document.xspfJukebox.playTrack();">Click to Play </a>


Skin Documentation

The XSPF Jukebox uses a custom XML format to specify the player appearance. The skin.xml files are in the following format:

<?xml version="1.0" encoding="UTF-8"?>
<skin version="0" xmlns="http://xsml.org/ns/0/">
  <name>skin name</name>
  <width>skin width</width>
  <height>skin height</height>
  <author>skin author</author>
  <email>author?s email</email>
  <website>author?s website</website>
  <comment>author?s comments</comment>
  <object>
      all skin objects reside between the <object> tags
  </object>
</skin>


Skin Objects

Function Objects

All function objects begin with an <object> tag, and are distinguished through a label attribute. Most labels have similar attributes, but there are some slight differences.


Labels
Attributes