Last Updated: 01.15.2008
Description
The XSPF Jukebox was created as an update to the Flash XSPF Web Media Player, based off of Fabricio Zuardi’s original creation. The Jukebox functions as both an .mp3 audio and .flv video player, capable of loading thousands of tracks. It uses an .xspf or .xml playlist to load tracks, and an .xml file to load skins. Optional is a .txt file to provide additional settings.
Contents
Included in the basic download of the XSPF Jukebox:
★“license.txt” - license for use, redistribution, and additions of/to the Jukebox
★“crossdomain.xml” - used to allow flash to access server directories
★“xspf_jukebox.swf” - the Jukebox flash file
★“playlister” folder - contains php files for Jukebox “Playlister”, used in place of .xspf/.xml to create dynamic playlist files
★skin folder - contains skin of your choice, with included “skin.xml” file and any needed images
Additional files included with “source.zip” download:
★“xspf_jukebox.fla” - source for the Jukebox
★“xspf_jukebox7.swf - flash 7 version of the Jukebox
Playlist
The XSPF Jukebox loads tracks through either the PHP “Playlister”, or an external .xspf or .xml file, created using the following format:
<?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 seconds x 1000, not required
</duration>
<info>
url of info link
</info>
<image>
url of image, overwrites “main_image” variable, if both are absent, image is chosen automatically through Amazon web search.
</image>
<purchase>
url of purchase link
</purchase>
<meta rel="http://geekkid.net/type">
track type, can be either “audio”, “video”, “playlist”, or “link”. automatically chosen to fit filename if absent
</meta>
</track>
</trackList>
</playlist>
* only “location” is required
** if “creator”, “title”, and “annotation” are absent, the Jukebox automatically tries to retrieve track id3 information
Variables
The XSPF Jukebox has many optional variables for extended customization. Variables can be used in two different ways, in one long string while embedding the swf file:
xspf_jukebox.swf?autoplay=true&shuffle=true&playlist_url=playlist.xml
or in an external “variables.txt” file:
&autoplay=true&shuffle=true&alphabetize=true&loaded=true
(use a normal ampersand, not
* “&loaded=true” must be included at the end of a “variables.txt” file to be loaded properly.
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
★findImage : boolean value to allow retrieval of related images from Amazon when none is present in playlist, default is false
★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
* only “playlist_url” and “skin_url” are required
single tracks
You can also use the Jukebox to play a single .mp3 or .flv file, using the two following variables in place of “playlist_url” and “creator”, “title”, and “annotation”:
★track_title : label of track
★track_url : url of track
Playlister
The Jukebox playlister, included, is an alternative to long .xspf or .xml files. It can be used in place of these files on any server that allows PHP. To use, open the “playlist.php” file with a plain text editor and edit the top portions of the code to match your server settings.
If you need individual images for each track (as opposed to one image for all tracks, or an Amazon supplied image), Set “$image” to true.
Set “$useid3” to true if you plan on using id3 tags.
Set the “$id3version” to 1 or 2, depending on your .mp3 files. If you are not sure what to put here, use 1, if it does not work properly, try 2. If it still fails to label your music correctly, reconvert your id3 tags using a capable program (iTunes).
Upload the “playlist.php” file to your server, and place it in the directory with your music, place it in the highest needed directory.
Upload the entire “id3” folder to your server if you plan to use id3 tags to label your music.
If you do not plan on using id3 tags, sort your music into sub-folders based on artist name. Label each .mp3 file with the correct track name (eg. “Everything to Everyone.mp3”).
If you need individual images for each track, place the image in the same folder as the corresponding track, with the same file name (eg. “Everything to Everyone.jpg”).
Finally, change your “playlist_url” in your embed script to “playlist_url=playlist.php”
Embedding
There are a couple of ways to embed the XSPF Jukebox with ease and using top web standards. The first is the included “embed.php” script, and the second is using the “SwfObject” Javascript in conjunction with plain HTML.
embed.php
The “embed.php” script allows for simple setup, and one-line embedding on any .php page. It uses a built-in “SwfObject” Javascript, with an HTML backup for ultimate ease and usability. It requires a server that allows PHP, and can only be called from a .php page. To use, open the “embed.php” file, inside the “playlister” folder, in a text editor. Change the first couple of lines to fit your settings, then save, and upload to your server. To embed, add the following line to your .php page:
require_once("embed.php");
Use the div id “flashcontent” to style and place using CSS.
swfobject + html
The “SwfObject” Javascript can be downloaded from http://blog.deconcept.com/swfobject/ . To use, place the file on your server, and add the following code into the head section of your .html page:
<script type="text/javascript" src="swfobject.js" />
Then add this code into the body section:
Javascript Control
A javascript interface has been added into the player to allow for extended control over the Jukebox by calling functions through javascript. 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
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.flashObject.playTrack()"
For example:
<a href="javascript:window.document.flashObjec.playTrack();">Click to Play
</a>
<div id="flashcontent"><object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="300" height="488" id="flashObject" align="middle"><param name="movie" value="xspf_jukebox.swf?playlist_url=playlist.xspf&skin_url=skin&loadurl=variables.txt" /><param name="wmode" value="transparent" /><embed src="xspf_jukebox.swf?playlist_url=playlist.xspf&skin_url=skin&loadurl=variables.txt" wmode="transparent" width="300" height="488" name="flashObject" align="middle" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />
</object>
</div>
<script type="text/javascript">
<!--
var so = new SWFObject("xspf_jukebox.swf?playlist_url=playlist.xspf&skin_url=skin&loadurl=variables.txt", "flashObject", "300", "488", "7", "#ffffff", true);
so.addParam("wmode", "transparent");
so.write("flashcontent");
window.document.flashObject.focus();
-->
</script>
* “playlist_url” can be used inside “variables.txt” instead of being loaded in this script