Last Updated: 09.06.2007
Description
The XSPF Jukebox is the remake of the XSPF Web Media Player, featuring a fully customizable interface through the use of “skin” files. The files are in a custom XML format, created for use specifically with the XSPF Jukebox. The specification is as follows:
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>
Display 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 <object> tag, and are distinguished through a “label” attribute. Most labels have similar attributes, but there are some slight differences.
<object label=”playButton” x=”” y=”” z=”” width=”” height=”” scale=”” image=”” color=”” alpha=”” hoverMessage=”” />
<object label=”playpauseButton” x=”” y=”” z=”” width=”” height=”” scale=”” image=”” color=”” alpha=”” hoverMessage=”” />
<object label=”stopButton” x=”” y=”” z=”” width=”” height=”” scale=”” image=”” color=”” alpha=”” hoverMessage=”” />
<object label=”prevButton” x=”” y=”” z=”” width=”” height=”” scale=”” image=”” color=”” alpha=”” hoverMessage=”” />
<object label=”fwdButton” x=”” y=”” z=”” width=”” height=”” scale=”” image=”” color=”” alpha=”” hoverMessage=”” />
<object label=”shuffleButton” x=”” y=”” z=”” width=”” height=”” scale=”” image=”” color=”” alpha=”” hoverMessage=”” />
<object label=”repeatButton” x=”” y=”” z=”” width=”” height=”” scale=”” image=”” color=”” alpha=”” hoverMessage=”” />
<object label=”scrollButton” x=”” y=”” z=”” width=”” height=”” scale=”” image=”” color=”” bgColor=”” alpha=”” bgAlpha=”” hoverMessage=”” />
<object label=”scrollupButton” x=”” y=”” z=”” width=”” height=”” scale=”” image=”” color=”” alpha=”” hoverMessage=”” />
<object label=”scrolldownButton” x=”” y=”” z=”” width=”” height=”” scale=”” image=”” color=”” alpha=”” hoverMessage=”” />
<object label=”startButton” x=”” y=”” z=”” width=”” height=”” scale=”” color=”” alpha=”” hoverMessage=”” />
<object label=”infoButton” x=”” y=”” z=”” size=”” color=”” font=”” text=”” bold=”” italic=”” underline=”” target=”” hoverMessage=”” />
<object label=”purchaseButton” x=”” y=”” z=”” size=”” color=”” font=”” text=”” bold=”” italic=”” underline=”” target=”” hoverMessage=”” />
<object label=”downloadButton” x=”” y=”” z=”” size=”” color=”” font=”” text=”” bold=”” italic=”” underline=”” target=”” hoverMessage=”” />
<object label=”playDisplay” x=”” y=”” z=”” width=”” height=”” scale=”” color=”” alpha=”” hoverMessage=”” />
<object label=”imageDisplay” x=”” y=”” z=”” width=”” height=”” scale=”” color=”” alpha=”” hoverMessage=”” />
<object label=”videoDisplay” x=”” y=”” z=”” width=”” height=”” scale=”” alpha=”” hoverMessage=”” />
<object label=”trackDisplay” x=”” y=”” z=”” width=”” size=”” color=”” font=”” text=”” align=”” bold=”” italic=”” underline=”” hoverMessage=”” />
<object label=”timeDisplay” x=”” y=”” z=”” size=”” color=”” font=”” text=”” bold=”” italic=”” underline=”” hoverMessage=”” />
<object label=”fulltimeDisplay” x=”” y=”” z=”” size=”” color=”” font=”” text=”” bold=”” italic=”” underline=”” hoverMessage=”” />
<object label=”volumeDisplay” x=”” y=”” z=”” width=”” height=”” scale=”” image=”” color=”” alpha=”” hoverMessage=”” />
<object label=”timeBar” x=”” y=”” z=”” width=”” height=”” scale=”” image=”” color=”” alpha=”” hoverMessage=”” />
Attributes
x : number : the x value for placing an object
y : number : the y value for placing an object
z : number : the z value, or depth of an object. depths are assigned automatically if omitted
width : number : the width of an object
height : number : the height of an object
scale : number : used in place of width/height. scales the object while retaining default aspect ratio. 1 equals no scale
size : number : font size. size must be preceded by a “+” for infoButton, purchaseButton, and downloadButton. ex. “+15”
image : url : load an image in place of the default symbol
shape : rectangle/rectRounded/circle/triangle : draws a shape for an object
border : number : defines a shape’s border width
color : hex code : sets the color of an object. ex. “ff0088”
borderColor : hex code : sets the color of an shape’s border
bgColor : hex code : sets the color of an object’s background
selectedColor : hex code : sets the color of the current track in the playlist
font : font name : sets the text font
text : text : displayed text
align : left/center/right : used only for trackDisplay. aligns text
bold : boolean : sets text bolding on/off
italic : boolean : sets text italics on/off
underline : boolean : sets text underline on/off
alpha : percent : sets alpha channel of object
bgAlpha : percent : sets alpha channel of an object’s background
url : url : allows an object to link to a web page
hoverMessage : text : message displayed on mouse over
Labels
playButton : a play button, toggles between play and pause
playpauseButton : a static play pause button, toggles between play and pause
stopButton : a stop button, stops the track
prevButton : a previous button, changes to the previous track
fwdButton : a forward button, changes to the next track
shuffleButton : a shuffle button, toggles on/off
repeatButton : a repeat button, toggles on/off
scrollButton : a scroll button with background, scrolls playlist
scrollupButton : an up arrow, scrolls playlist up
scrolldownButton : a down arrow, scrolls playlist down
startButton : a rectangle to indicate click location to start load or play, set alpha to 0
infoButton : text button to follow the current info link in a playlist
purchaseButton : text button to follow the current purchase link in a playlist
downloadButton : text button to directly link to the currently playing mp3
playDisplay : displays current track images
imageDisplay : displays current track images
videoDisplay : displays video tracks
trackDisplay : displays currently playing track
timeDisplay : displays current track time in a standard format “00:00”, toggles between time, duration, and time remaining
fulltimeDisplay : displays current track time in a full format “00:00/00:00”, displays time and duration
volumeDisplay : displays a volume bar to change track volume
timeBar : displays current track percentage in bar form, click to scan track
loadBar : displays loaded percentage for the current track in bar form