Tutorials — How to display Juke-It Flash jukebox players in your web pages
This tutorial will show you how to use the Flash jukebox players generated from Juke-It and display them in your HTML web pages.
Export your jukebox from Juke-It
Once you are ready to export your jukebox from Juke-It, you will want to do File -> Export Jukebox. Doing this will output several files to the specified output location in the Setup tab of the Output Settings window. By default Juke-It exports the files to your Desktop, however we recommend you create a folder and set it to output to the new folder so that you know what files were outputted as they are all needed for the jukebox player to function properly. You should see the main jukebox swf file, a playlist xml file and a separate swf/flv file for each audio track added to the playlist.
In this tutorial we will create a folder called "jukebox" and output the jukebox files to that folder.
Display in your HTML page
How to display your jukebox player in your web pages will depend on how you wish to structure your files in your site. First you will need all of the files outputted from Juke-It. If the files are not already in your website, you will need to copy over the entire folder that holds your jukebox files. In this tutorial, we would copy over the "jukebox" folder and will be located at (http://www.verticalmoon.com/tutorials/jukeit/display_jukebox/jukebox)
The easiest solution to display the jukebox player is to place the html page that will be displaying the jukebox player, into the same folder as the jukebox files. Then you would just display the jukebox swf file as you would any other swf file without any further modifications and it should load everything ok (playlist, audio tracks, etc.)
Example 1 is an example of this method.
If you wish to keep the jukebox files in a separate folder from the html page, then you will need to do a little extra work. You can start by adding the jukebox swf file to your web page as you would any other swf file. Below is the code used to display the player in this tutorial
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="320" height="240" id="MyMovieName">
<param name="movie" value="jukebox/jukebox.swf">
<param name="quality" value="high">
<embed src="jukebox/jukebox.swf" quality="high" width="320" height="240" name ="MyMovieName" type="application/x-shockwave-flash"
pluginspage="http://www.macromedia.com/go/getflashplayer">
</embed>
</object>
Now if you try to view the player now, it will not run properly. The player should load, but the playlist and audio tracks will be missing from the player. This is due to how the Flash player resolves relative paths when loading external files. By default it loads relative to the html page that displays the Flash file and not the base swf file which is loading the files.
Example 2 (Wrong) is an example of this.
To fix this, you must add the "base" parameter to the <object> and <embed> tags that displays the jukebox swf file and set it to "."
This will tell the Flash player to load the files relative to the main jukebox swf.
So the modified html code should look something like the following (where the added changes are in red)
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="320" height="240" id="MyMovieName">
<param name="movie" value="jukebox/jukebox.swf">
<param name="quality" value="high">
<param name="base" value=".">
<embed src="jukebox/jukebox.swf" quality="high" width="320" height="240" name ="MyMovieName" type="application/x-shockwave-flash"
pluginspage="http://www.macromedia.com/go/getflashplayer" base=".">
</embed>
</object>
Example 2 (OK) is an example of this method
Our examples are also using the Javascript method to display the Flash files as instructed in the Flash ActiveX Microsoft Internet Explorer Fix Tutorial.
If you use this method to display your Flash jukebox player, you will also need to modify the javascript call as well
<script type="text/javascript">
VM_EmbedFlash( 'codebase', 'http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0', 'width', '320', 'height', '240', 'src', 'jukebox/jukebox.swf', 'quality', 'high', 'name', 'MyMovieName', 'pluginspage', 'http://www.macromedia.com/go/getflashplayer', 'base', '.' );
</script>
Dreamweaver
If you are using Dreamweaver where it uses Javascript to display your Flash files, you will need to modify the javascript call as well. It calls the function AC_FL_RunContent() and would look something similar to the following, where the "base" parameter would again need to be added.
<script type="text/javascript">
AC_FL_RunContent( 'codebase', 'http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0', 'width', '320', 'height', '240', 'src', 'jukebox/jukebox.swf', 'quality', 'high', 'name', 'MyMovieName', 'pluginspage', 'http://www.macromedia.com/go/getflashplayer', 'base', '.' );
</script>