Flash XSPF Jukebox

Created by Lacy Morrow


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

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:


  1. “license.txt” - license for use, redistribution, and additions of/to the Jukebox

  2. “crossdomain.xml” - used to allow flash to access server directories

  3. “xspf_jukebox.swf” - the Jukebox flash file

  4. “playlister” folder - contains php files for Jukebox “Playlister”, used in place of .xspf/.xml to create dynamic playlist files

  5. skin folder - contains skin of your choice, with included “skin.xml” file and any needed images


Additional files included with “source.zip” download:


  1. “xspf_jukebox.fla” - source for the Jukebox

  2. “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

&amp;)


* “&loaded=true” must be included at the end of a “variables.txt” file to be loaded properly.


parameters

  1. playlist_url : the url of the xspf file to load

  2. skin_url : url of the skin folder

  3. 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

  4. activeDownload : boolean value to allow or disallow direct downloads of tracks, default is false

  5. alphabetize : boolean value to alphabetize playlist, default is false

  6. autoload : boolean value that makes the playlist load without the initial user click, default is false

  7. autoplay : boolean value that makes the playlist load and the music start without the initial user click, default is false

  8. autoresume : boolean value that allows players on multiple pages to seamlessly continue music as a user browses pages, default is false

  9. buffer : seconds to preload video before playing, exclude for automatic

  10. 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

  11. findImage : boolean value to allow retrieval of related images from Amazon when none is present in playlist, default is false

  12. forceAlphabetize : boolean value, forces full alphabetizing, including preceding 'the' in artist title, default is false

  13. format : text to format track label, use “-creator”, “-title”, “-location”, and “-annotation” to insert respective values, default is “-creator : -title”

  14. gotoany : boolean value that forces travel to unknown URLs, default is false

  15. image : url for a jpg image that is shown when autoplay is off

  16. infourl : global info url for all songs, fills absent playlist info urls

  17. load_message : message displayed after autoload

  18. main_image : global image url, fills absent playlist images

  19. mainurl : right-click >> "about" url

  20. midChar : character placed to separate creator and title values for tracks, overwritten by format, default is “:”

  21. no_continue : boolean value to turn off automatic song changing, default is false

  22. player_title : title text, default is “Xspf Jukebox”

  23. repeat : boolean value to set repeat, default is false

  24. repeat_playlist : boolean value to repeat the playlist, default is true

  25. shuffle : boolean value to set shuffle, default is false

  26. start_track : track number for beginning track, default is 1

  27. statsurl : url to an external script that can collect POST values. Can collect playSong and annotation

  28. timedisplay : numerical value to show time counter; 0:off, 1:all, 2:elapsed, 3:duration, 4:countdown

  29. trackNumber : boolean value that adds track numbers to labels, default is false

  30. useId3 : boolean value that forces id3 tag use, default is false

  31. 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”:

  1. track_title : label of track

  2. 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:


  1. playTrack : play/pause the track

  2. stopTrack : stop the track

  3. nextTrack : advance to the next track

  4. prevTrack : go back to the previous track

  5. shuffleToggle : turn shuffle on/off

  6. repeatToggle : turn repeat on/off

  7. gotoTrack(track number) : play a specified track

  8. 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.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