The Secrets of
James Jukebox

• a pop-up window
• a frame page
• Real Audio files
• MIDI files

The Pop-Up Window

This is activated by the Jukebox button using the following command:

<A HREF="Javascript:Jukebox()">Jukebox</a>

This initiates the function Jukebox():

The first few lines of code check to see if your browser is IE or Netscape, which both support pop-up windows. If not, a Sorry alert box pops up.

If all is OK, function Jukebox() is called. This generates a pop-up window with the following parameters, which may be modified according to your needs:

My_Page.html popup 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

The Frame Page

This is a basic top, middle and bottom frame page.

The top frame contains 2 navigation links to select either MIDI or Audio files, which take you to the appropriate anchor point on the menu.

The middle frame houses the menu, consisting of standard HTML hyperlinks.

The bottom frame is initially a placeholder page featuring a jukebox graphic. When a music clip is selected from the menu, it will initiate the appropriate Real Audio or MIDI plugin, which will load into the bottom frame.

Real Audio and MIDI Files

These are edited clips of my songs and sequences. The sequences are standard MIDI files, while the song clips were converted from WAVE files to Real Audio format using the RealPlayer G2 encoder.

If you'd like to create your own Real Audio files for your Web pages, the encoder is available free from Real Audio. It's very easy to use, with wizards to guide you all the way.

The encoder can also create automatic web pages from the encoded files. You have the option to choose the standard hyperlink format (click on the link and the stand-alone Real Audio player pops up to play the clip) - or the embedded format, as I've used for my Jukebox.

Whichever option you choose, each type has the necessary information included so that the files will run properly on Microsoft or Netscape browsers.

I chose the embedded type, which requires a plugin, for the following reasons:

• I could specify the physical size of the player, and place it neatly inside the pop-up window
• I could make the clip play automatically on load
• I could add a song title underneath the player (if desired)

A not-so-obvious advantage of using embedded players is its TYPE attribute. This lets you specify the MIME type of the file to be loaded.

Basically, the MIME type tells your browser which type of helper program or plugin to associate with a particular file format.

For example, a file with the suffix .mid and the MIME type audio/mid would be recognised as a MIDI file, while a file with the suffix .rm and the MIME type audio/x-pn-realaudio-plugin would be identified as a Real Audio G2 file.

The MIME type is not critical when you're playing files on your computer. If you attempt to play a file which your computer does not recognise, an alert box will pop up, asking you to select an appropriate viewer.

It's not so easy when viewing files via the Internet. By rights, all the MIME types used on your Web pages should be registered with whatever server you use. This ensures that those files can be viewed using the correct helper program or plugin. If so, you'll have no problems - as long as the person visiting your site has the appropriate file viewers on his or her computer. If not, your visitor will be asked what viewer to use.

Embedded files allow you to bypass server configuration, since you can specify the MIME type via the TYPE attribute of the EMBED tag. This demonstrated in the 2 examples below:

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 (the classid section), followed by the standard EMBED tag for other browsers. The PARAM information tells the browser how to display the plugin.

Now here's where things can get tricky. Since the file is embedded into the Web page, the player must be a plugin. Therefore, both the file and MIME types must refer to Real Audio's plugin, not the normal stand-alone player. Hence the file type has the .rpm suffix, and the MIME type is audio/x-pn-realaudio-plugin.

The .rpm file is used because it lets the player graphic load quickly.

That's because the .rpm file is not the actual clip - it's a metafile, or placeholder. It's a simple ASCII text file - created with Notepad and given the .rpm extension - and contains only the full URL of the file:which points to the location of the clip, somefile.rm.

e.g: - http://www.myserver.com/myfolder/somefile.rm

• the Real Player console can load quickly, before the clip itself loads
• a large number of G2 plugins can be inserted on a page, yet the page would still load quickly

In this example, we're embedding a MIDI file, using the Crescendo Active-X CLASSID.

If the Crescendo plugin is on your computer, it will be loaded. If not, the subsequent EMBED command will load the first MIDI plugin that is located.

As with the Real Audio plugin, the bottom frame is overwritten "on-the-fly" using Javascript.

When the Jukebox is loaded, right-click on the middle frame (which houses the menu) and view the Source code to see how it's done.

Until recently, I would have had to include a BGSOUND tag for Internet Explorer users. This is Microsoft's own variation of the EMBED tag, and recognisable only by IE. However, Microsoft, in its infinite wisdom, now also recognise the EMBED tag for MIDI. Thanks, Bill!

The major disadvantage of embedded files is that when you load the page, you must load the embedded file at the same time. Not a problem with Real Audio since it uses meta files, but if I did it with MIDI files, the page would take forever to load - especially if there were numerous plugin instances on the same page.

Even worse if the plugins were for large Wave files!

That is, unless you use a .wax meta file.

This is a relatively new format for Windows Media Player, and works the same as Real Audio's .rpm file.

Again, it is a simple text file, but uses a trickier format:

<ASX version = "3.0"> <Entry> <Ref href = "http://www.myserver.com/file.mid" /> </Entry> </ASX>

The advantage is that the .wax file can point to any type of file supported by the Windows Media Player, not just MIDI files - wave, mp3, Windows Media, etc.

The disadvantage is that Windows Media Player is not Netscape compatible (at least I don't think it is).

Continuous Play Mode

NOTE: In both cases, the URLs MUST be absolute:

http://server/folder/file.ext

Otherwise the plugins won't find them.

Similarly, if accessing the files direct from your
hard drive, the URL should look something like:

file:///C:/myfolder/myaudio/file.ext