A skinnable, customizeable Flash media player.

Live demo of the XSPF Jukebox

You must have flash installed!

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.

As of 2014 this project is no longer being maintained. It is considered to be in a stable state and will receive no further updates.

If you would like to take over, please file an issue.

Features

Fully customizable skins
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 caching
Many customizeable options
ID3 track meta infomation support
Tiny imprint - only 20Kb!
Ability to log player usage information
Full Javascript API
Includes modified xplay.php to generate playlist automatically

Install
Jukebox Options
Skinning the Jukebox
XSPF Playlists
License

Install

1. Create an XSPF playlist pointing to your media files

(Optional) Automatically generate your playlists in PHP, Python, or JS

Edit the first line of the xplay.php file to point to your media directory:

$media = "media"

Edit any options you wish, playlist caching 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">
      <!-- this will be replaced -->
  </div>

4. Invoke the player via javascript:

<script>
    var params = {};
    params.wmode="transparent";
    params.allowscriptaccess="always";

    var url = "xspf_jukebox.swf?playlist_url=xplay.php&skin_url=skins/iTunes&param1=value";
    swfobject.embedSWF(url, "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. For example:

The entire url for the .swf on the demo 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.

Options

The XSPF Jukebox can be customized for almost any need to play audio or video on the web.

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:

track_title : label of track
track_url : url of track

Optional Parameters

playlist_url : the url of the xspf file to load
skin_url : url of the skin folder
loadurl : url linking to a text file containing all variables. cuts down on html coding and file sizes, one file can be used by many players
activeDownload : boolean value to allow or disallow direct downloads of tracks, default is false
alphabetize : boolean value to alphabetize playlist, default is false
autoload : boolean value that makes the playlist load without the initial user click, default is false
autoplay : boolean value that makes the playlist load and the music start without the initial user click, default is false
autoresume : boolean value that allows players on multiple pages to seamlessly continue music as a user browses pages, default is false
buffer : seconds to preload video before playing, exclude for automatic
crossFade : either a boolean value, which when true is set to the default time, or the number of seconds to fade (1-12), default is 6 seconds
forceAlphabetize : boolean value, forces full alphabetizing, including preceding 'the' in artist title, default is false
format : text to format track label, use "-creator, "-title, "-location, and "-annotation to insert respective values, default is "-creator : -title
gotoany : boolean value that forces travel to unknown URLs, default is false
image : url for a jpg image that is shown when autoplay is off
infourl : global info url for all songs, fills absent playlist info urls
load_message : message displayed after autoload
main_image : global image url, fills absent playlist images
mainurl : right-click » "about" url
midChar : character placed to separate creator and title values for tracks, overwritten by format, default is ":
no_continue : boolean value to turn off automatic song changing, default is false
player_title : title text, default is "Xspf Jukebox
repeat : boolean value to set repeat, default is false
repeat_playlist : boolean value to repeat the playlist, default is true
shuffle : boolean value to set shuffle, default is false
start_track : track number for beginning track, default is 1
statsurl : url to an external script that can collect POST values. Can collect playSong and annotation
timedisplay : numerical value to show time counter; 0: off, 1: all, 2: elapsed, 3: duration, 4: countdown
trackNumber : boolean value that adds track numbers to labels, default is false
useId3 : boolean value that forces id3 tag use, default is false
volume_level : starting volume level percent, default is 100

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>

NOTE: 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:

playTrack() : play/pause the track
stopTrack() : stop the track
nextTrack() : advance to the next track
prevTrack() : go back to the previous track
shuffleToggle() : turn shuffle on/off
repeatToggle() : turn repeat on/off
gotoTrack(track number) : play a specified track
addTrack(track id, location, title, creator, info url, purchase url, image, annotation) : add a track to the playlist

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.xspfJukebox.playTrack();

For example:

<a href="https://github.com/lacymorrow/xspf-jukebox/blob/master/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

<background x="" y="" width="" height="" scale="" image="" shape="" border="" color="" borderColor="" alpha="" />
<image x="" y="" z="" width="" height="" image="" alpha="" url="" target="" hoverMessage="" />
<shape x="" y="" z="" width="" height="" shape="" border="" color="" borderColor="" alpha="" url="" target="" hoverMessage="" />
<text x="" y="" z="" size="" color="" font="" text="" border="" bold="" italic="" underline="" alpha="" url="" target="" hoverMessage="" />
<playlist x="" y="" z="" width="" height="" size="" color="" font="" selectedColor="" bold="" italic="" underline="" alpha="" hoverMessage="" />
<badge x="" y="" width="" height="" />

Function Objects

All function objects begin with an

lacymorrow / xspf-jukebox

readme

Live demo of the XSPF Jukebox

As of 2014 this project is no longer being maintained. It is considered to be in a stable state and will receive no further updates.

If you would like to take over, please file an issue.

Features

Table of Contents

Install

1. Create an XSPF playlist pointing to your media files

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

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

4. Invoke the player via javascript:

Options

Single-track mode

Optional Parameters

Playlist Format

NOTE: only `<location>` is required

Javascript API

Skin Documentation

Skin Objects

Function Objects

Labels

Attributes

Generating an XSPF Playlist:

License

lacymorrow / xspf-jukebox

readme

Live demo of the XSPF Jukebox

As of 2014 this project is no longer being maintained. It is considered to be in a stable state and will receive no further updates.

If you would like to take over, please file an issue.

Features

Table of Contents

Install

1. Create an XSPF playlist pointing to your media files

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

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

4. Invoke the player via javascript:

Options

Single-track mode

Optional Parameters

Playlist Format

NOTE: only <location> is required

Javascript API

Skin Documentation

Skin Objects

Function Objects

Labels

Attributes

Generating an XSPF Playlist:

License

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

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

NOTE: only `<location>` is required