free hosting   image hosting   hosting reseller   online album   e-shop   famous people 
Free Website Templates
Free Installer

Creating An On-Line
Pop-Up Jukebox


Basically, for the purposes of this example, you'll need the following: For working examples, see the links at the bottom of this page.


1) The Pop-up Window

This is activated by a link on your page using the following command:
This initiates the Javascript function Jukebox(), which generates a pop-up window called pop-up :
Below is a list of pop-up window parameters, which may be modified according to your needs:

jukeframe.html
JukePopUp
toolbar=0
location=0
status=0
menubar=0
scrollbars=1
resizable=1
top=100
left=100
width=225
height=190		 URL of the window's contents
the name of the window
no toolbar to be displayed
no location window
no status line
no menu bar
scrollbars if necessary
window can be resized
distance from top of screen in pixels
distance from left of screen in pixels
width of window in pixels
height of window in pixels

2) The Frame Page

This is a basic 3-part frame page:
The top frame - top - contains your site's graphic, navigation links, etc.
The middle frame - menu - contains the playlist.
The bottom frame - bottom - is a placeholder, where the audio plugin(s) will load.

The top and bottom frames are fixed (no scrolling), while the middle frame is set to "auto", which will display scrollbars if required (depending on the size of the playlist).

The frameborder parameter is set to "0" - if you want borders, modify the parameter accordingly.

The pages to be loaded are top.html, menu.html and bottom.html respectively.

When a music clip is selected from the menu, it will initiate the required plugin, which will load into the bottom frame.


3) Audio Files

For the purpose of this tutorial, I'm using Real Audio and MIDI files.

Either way, it gets a little bit tricky, since 2 types of plugin are required: For the Microsoft version to work properly, you need to include the correct MS CLASSID code, which looks like this:
In the above example, we're embedding a Real Audio file, enclosed within the OBJECT TAG.

This consists of the necessary Microsoft Active-X information, followed by the standard EMBED tag for other browsers. The various parameters dictate the appearance and size of the player, and whether it will start playing automatically or not.

Now here's where things can get tricky. Since the file is embedded into the bottom frame of the jukebox, the player must be the plugin version, not the normal stand-alone player.

Microsoft's OBJECT code takes care of this for Internet Explorer, but for other browsers which use the EMBED command, the TYPE parameter is set to the MIME type for the plugin:
audio/x-pn-realaudio-plugin
The MIME type tells the browser what sort of file you're looking for. Since this is Real Audio's own registered MIME type specifically for the G2 plugin, there's no chance that another type of plugin could be loaded.

Also, we're not calling the song directly, but its metafile, song.rpm.

This is basically an ASCII text file with the absolute URL of the location of the song, which is called song.rm.

The advantage of this is that the song itself is not loaded until you want it. This minimizes initial loading time, since the metafile is only a few bytes.

So if you wanted to place a lot of Real Audio plugins on the same page - each containing different songs - the page would still load quickly, since you're not loading the complete songs, but the tiny metafiles.
In the above example, we're embedding a MIDI file, using the CLASSID for the Crescendo plugin.

If the browser is Internet Explorer and the Crescendo Active-X plugin is present on the user's computer, it will be loaded.

Otherwise, the EMBED section will load the first plugin it finds which plays MIDI files.

So all bases are covered - unless there are no MIDI plugins, in which case you're greeted with The Sounds of Silence.

Using the above methods, it's easy to embed any type of plugin - just find out the CLASSID from the manufacturer's Support section at their website, plus any special requirements there may be.


4) Loading the songs

This is where you could have problems. When you set up the frame page, you must give each frame its own distinctive name - eg. for the bottom frame, where the player loads, perhaps something like bottom, as I've used in the examples here.
NOTE : Make sure that no other frame on your site has the same name, or your browser won't know which frame you're talking about!
To load a song, simply make a series of links like these, incorporated into your menu page:
Each link will load an HTML page called song?.html - containing the above OBJECT information in its BODY section - into the bottom frame.

The base target tag, which should be placed above the links, ensures that the page is loaded into the bottom frame, which we named bottom in the frame page setup.

The tag also saves you from typing target="bottom" for every link.

Using this method is simple, but the disadvantage is that you'll need a separate page for each song on your playlist.

This is not only a pain, but takes up space on your server.

However, you can also embed the plugin "on-the-fly" using additional Javascript.

For more information on constructing Javascript jukeboxes, check out Real Audio and Live Update.

The latter is the home of the Crescendo MIDI plugin, but they have a lot of information on building MIDI jukeboxes, which can easily be adapted for a Real Audio jukebox, or even a combination of both MIDI and Real Audio.

Feel free to cut-and-paste any of the above code into your own pages, and modify to suit.


The Demo Jukebox

This is combination of audio and MIDI files I found on the Net. As far as I know, they're all public domain.

The demo here uses document.write commands to create the frame page "on-the-fly". View the Source code of this page to see how it's done.

When the jukebox is loaded, check out the Source code of the menu frame. Again, "on-the-fly" scripting is used to create the plugin pages in the bottom frame.

For the MidiURL function, I've used parent.frames[2].document.writeln, while for the SongURL function, I've used parent.bottom.document.write.

Both of these refer to exactly the same part of the document where the writing takes place - the bottom frame.

In both cases, the parent is the master frame inside the popup window. It may also be called top

frames[2] is the frame that we're concerned with. Each frame has an index: frames[*].

Since there are 3 frames, the indices are [0], [1] and [2].

Hence frames[2] refers to the bottom frame.

We could also refer to that frame by the name defined in the original frameset - bottom - which is what I've done with the second variation in the SongURL function.

With the MidiURL function, each line is written to the frame sequentially.

With the SongURL function, the required HTML code is loaded into a variable, menupop, then the entire page is written at once.

You'll notice that for the latter, a write command is used, not writeln. That's because the line breaks are performed in each menupop line by the \n command.

Also, I've added an extra title line for each audio clip. The title is included in the menu links, along with the file name, then these parameters are passed to the corresponding function.


Try It Out

Open Jukebox



© 2001 CyberSchool
Last Update: