XSPF Jukebox skin.xml Specification


http://blog.lacymorrow.com/projects/xspf-jukebox/

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=”playButtonx=”” y=”” z=”” width=”” height=”” scale=”” image=”” color=”” alpha=”” hoverMessage=”” />

<object label=”playpauseButtonx=”” y=”” z=”” width=”” height=”” scale=”” image=”” color=”” alpha=”” hoverMessage=”” />

<object label=”stopButtonx=”” y=”” z=”” width=”” height=”” scale=”” image=”” color=”” alpha=”” hoverMessage=”” />

<object label=”prevButtonx=”” y=”” z=”” width=”” height=”” scale=”” image=”” color=”” alpha=”” hoverMessage=”” />

<object label=”fwdButtonx=”” y=”” z=”” width=”” height=”” scale=”” image=”” color=”” alpha=”” hoverMessage=”” />

<object label=”shuffleButtonx=”” y=”” z=”” width=”” height=”” scale=”” image=”” color=”” alpha=”” hoverMessage=”” />

<object label=”repeatButtonx=”” y=”” z=”” width=”” height=”” scale=”” image=”” color=”” alpha=”” hoverMessage=”” />

<object label=”scrollButtonx=”” y=”” z=”” width=”” height=”” scale=”” image=”” color=”” bgColor=”” alpha=”” bgAlpha=”” hoverMessage=”” />

<object label=”scrollupButtonx=”” y=”” z=”” width=”” height=”” scale=”” image=”” color=”” alpha=”” hoverMessage=”” />

<object label=”scrolldownButtonx=”” y=”” z=”” width=”” height=”” scale=”” image=”” color=”” alpha=”” hoverMessage=”” />

<object label=”startButtonx=”” y=”” z=”” width=”” height=”” scale=”” color=”” alpha=”” hoverMessage=”” />

<object label=”infoButtonx=”” y=”” z=”” size=”” color=”” font=”” text=”” bold=”” italic=”” underline=”” target=”” hoverMessage=”” />

<object label=”purchaseButtonx=”” y=”” z=”” size=”” color=”” font=”” text=”” bold=”” italic=”” underline=”” target=”” hoverMessage=”” />

<object label=”downloadButtonx=”” y=”” z=”” size=”” color=”” font=”” text=”” bold=”” italic=”” underline=”” target=”” hoverMessage=”” />

<object label=”playDisplayx=”” y=”” z=”” width=”” height=”” scale=”” color=”” alpha=”” hoverMessage=”” />

<object label=”imageDisplayx=”” y=”” z=”” width=”” height=”” scale=”” color=”” alpha=”” hoverMessage=”” />

<object label=”videoDisplayx=”” y=”” z=”” width=”” height=”” scale=”” alpha=”” hoverMessage=”” />

<object label=”trackDisplayx=”” y=”” z=”” width=”” size=”” color=”” font=”” text=”” align=”” bold=”” italic=”” underline=”” hoverMessage=”” />

<object label=”timeDisplayx=”” y=”” z=”” size=”” color=”” font=”” text=”” bold=”” italic=”” underline=”” hoverMessage=”” />

<object label=”fulltimeDisplayx=”” y=”” z=”” size=”” color=”” font=”” text=”” bold=”” italic=”” underline=”” hoverMessage=”” />

<object label=”volumeDisplayx=”” y=”” z=”” width=”” height=”” scale=”” image=”” color=”” alpha=”” hoverMessage=”” />

<object label=”timeBarx=”” y=”” z=”” width=”” height=”” scale=”” image=”” color=”” alpha=”” hoverMessage=”” />

loadBar” x=”” y=”” z=”” width=”” height=”” scale=”” image=”” color=”” alpha=”” hoverMessage=”” />

Attributes


x : number : the x value or percentage for placing an object

y : number : the y value or percentage 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