How to Make a Jukebox Web Page

Jukebox image by daniellecolla from

In the 1950s, coin operated jukeboxes ruled the malt shops of the world. Today, thanks to the magic of the Internet, you can place a facsimile of one of those wonderful music machines on your web page. All it takes is a stack of your favourite MP3 files, a website and a few minutes of your time. And if you run out of music, you can use the jukebox to play other audio formats as well.

Download a Flash MP3 player that has "playlist" capabilities. Some popular brands include Wimpy, A4desk and Flabell.

Run the installation wizard. If your player does not have an installation wizard, skip to the next section. After running the wizard, you will see two generated files: an HTML file containing your web page code and an XML file containing the names of the MP3 audio files that you selected during the installation process.

Upload all files to your website. Don't forget to include the JavaScript file that comes with your download package. This file provides the logic that manages the jukebox and playlists.

Open the sample XML file that comes with your player and add your list of MP3 songs. Each jukebox player will use a slightly different XML file format, but most of them will have a structure similar to this:

song1.mp3 Jingle Bells

Replace "song1.mp3" with the file name of one of your MP3 files and "Jingle Bells" with the actual song name. Add an "item" block for each MP3 file.

Add the name of the included JavaScript file to the "Head" section of your HTML. This JavaScript file controls your jukebox and requires no modification. Embed this file as follows:

Replace "myJavascript.js" with the name of the JavaScript file included in your download package.

Add an HTML code block similar to this one at the location where you want your jukebox to appear:

This is a sample "object" tag code block. Different jukebox players will have slightly different parameter (PARAM) values, but the layout of the "object" block will be the same. In this example, you are supplying the player's dimensions and the location of the player file. Details on how to set up this code block will be found in your documentation.

Upload all files to your website and test your web page.

Most recent