Suggest A Fix PC Support Forums (Powered by Invision Power Board)

Webmastering and HTML Articles/Tutorials

How to create an Automated Jukebox

Article by Tom Cammarata (aka Phzzz; aka Nunzio390; aka Scruffy) for inclusion at www.suggest-a-fix.com

This article includes scripting for utilization of Windows Media Player object and embed controls (for cross-browser compatability) and music will play perfectly in all major browsers (eg: MSIE, Netscape/Mozilla, and Opera browsers). The Demonstration Jukebox on this page is very basic and only contains a few songs for instruction and illustration purposes, and does not contain the additional scripting used for Lyrics for each of the songs to be displayed in an auto-scrolling iframe, as is done in the full-featured Automated Jukebox located on this page at my main site. If you are interested in obtaining the additional scripting used for Lyrics for each of the songs to be displayed in an auto-scrolling iframe, then see my reply to Jim Campton here.

Start the Automated Jukebox Demo

This article is in 2 PARTS...

1. The creation of one small javascript used to open the jukebox window (that script is utilized on this page where the jukebox window is generated by clicking on the Start the Automated Jukebox Demo link above).

2. The creation of small separate HTML documents (web pages) for each song in your "song list".

You may have any number of songs you want in your Jukebox Song List, as long as each has its own separate song HTML document associated with it. In this demo example I'm only including 4 songs, all in MP3 format. If you like, you can also use WMA or MIDI files. Also, again in this example, for simplicity, each individual song HTML document is named using the format of song#.html. The first song HTML document is named song1.html. The second song HTML document is named song2.html. And so on and so forth for each song you would like added to the Jukebox Song List. The scripting utilizes the META refresh tag to determine the length of the currently playing song in seconds, and then "refreshes" to the next song HTML document in the Jukebox Song List at the end of that time. This is the part of the scripting that causes consecutive (in order) playing of each song.

Part 1:

This is the small javascript that is used to open the jukebox window. It is to be placed anywhere between the starting <head> and ending </head> tags on the page you want your jukebox link to be on...

Now, we need to assign values for the URL, WindowName, Features parameters specified in the above javascript "openjukebox" function into our jukebox link below. You can place this link code at any point after the <body> tag on your page where you want the link for the jukebox to appear...

The words "Start the Automated Jukebox" in the code for the link above can be changed to words of your choice, or even an image graphic reference for the jukebox link (if you want to get fancy and not use plain text). In that case, the code for an image to replace the text would be in this format:

<img src="name_of_image_file" width="value in pixels" height="value in pixels" alt="descriptive text here" border="0">

Now I'll explain the values above that reference the URL, WindowName, Features parameters...

URL: This is crucial. The above filename of song1.html references the document that contains the "embedded" (explained in Part 2) song file for the FIRST song in your song list. That HTML file plays the first song and also sets up the menu for the jukebox. You can create that first song page with whatever name you like, as well as naming any subsequent song pages to names of your choice. But if you do that, then wherever you see song1.html, song2.html, etc. in the rest of my instruction and coding here, you must then replace those file names with your own, everywhere throughout the code on every page, including all subsequent song pages. If you are uncertain of being able to do so, or you feel it would be too involved, then create your song file pages named exactly the way I have done here. You can't go wrong that way.

WindowName: I've called it jukebox above. You can name it whatever you like. It's only a name designation for the resulting jukebox javascript window.

Features: These values are important insofar as the way the jukebox window displays. The parameters I specified above include toolbar, location, directories, status, menubar, scrollbars, resizable, copyhistory, left, top, screenX, screenY, width, and height. You will notice that all except 3 of them have 0 (zero) values. The 3 that do not are scrollbars, width and height. I highly recommend that all 0 (zero) values remain that way. You can change them, but I recommend against it. The width and height values of the resulting jukebox window can be changed by you as needed. The width would vary depending on the length of any given song name. A long song name might cause a horrid horizontal scrollbar, and you may want to increase the width value of the window to avoid that. I would leave scrollbars at a value of 1. I say this because the window height value can remain constant, but as your song list grows, you will have the option of an upward and downward scroll to display the entire song list if more songs are added and it grows.

Part 2:

This is the complete page code for the first song file (song1.html)...

then right-click and copy the sample song file code below and change all parameters as needed:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">

<!-- START COMMENT
 HTML document name: song1.html 
This html document plays the first song and sets up the menu for the
juke box. The menu is where you select what song plays next,
and what songs you want to hear either manually or automatically
.. one right after the other with no user intervention

The meta refresh in this file is timed in seconds to the length of what ever
song you want playing. When the time, in this case "170" expires, this file
will "refresh" and call the next HTML song file and start the sequence all over
again.  Change the "170" value in the meta tag below for EACH song page
to reflect the length in seconds of the song on that page.
at the end of that time, this page will "refresh" to the next song page
in the list.  In this case, since this file is "song1.html", the next file to
"refresh" to in the meta tag below will be "song2.html".
You can have as many song HTML files as you choose, as long
as each has a unique name.  (i.e. song1.html, song2.html, etc...)
END COMMENT -->

<title>Automated JukeBox</title>

</head>

Song now playing:

Wasted On The Way

Jukebox Song List:

1. <a href="song1.html">Wasted On The Way</a> 
2. <a href="song2.html">Tiny Dancer</a> 
3. <a href="song3.html">Dreams</a> 
4. <a href="song4.html">Mystery Train</a>

Choose a song to play or let them just play automatically.
 <a href="javascript:self.close()">Close this window</a> to shut music off.

</body>
</html>

Instead of listing instructions here as I did in this article in Part 1 above, all your instructions are included within COMMENTS (see the definition of HTML comments) in the page code above. All these comments begin and end this way...



They are not needed for the coding, and can be removed by you once you understand the process. To show how you may remove these comments from your pages, here is the complete page code for the second song file (song2.html), but WITHOUT instructions enclosed within comments...

then right-click and copy the sample song file code below and change all parameters as needed:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<meta http-equiv="refresh" content="375; url=song3.html">

<title>Automated JukeBox</title>

</head>

Song now playing:

Tiny Dancer

Jukebox Song List:

1. <a href="song1.html">Wasted On The Way</a> 
2. <a href="song2.html">Tiny Dancer</a> 
3. <a href="song3.html">Dreams</a> 
4. <a href="song4.html">Mystery Train</a>

Choose a song to play or let them just play automatically.
 <a href="javascript:self.close()">Close this window</a> to shut music off.

</body>
</html>

IMPORTANT: When viewing the source code of the page of the LAST song to be played (in this demo/article that file is "song4.html"), since that song is ALSO the very LAST song in the Jukebox Song List, the next file to "refresh" to in the meta tag will be "song1.html", to start the jukebox over again, from the beginning. In other words, always have the last song in your Jukebox Song List "refresh" to the first song again.

Okay!! That's it! Enjoy your Automated Jukebox!!

Take care!
...Tom