Setting up the Mini-Jukebox
You will need to create several files that compose the Jukebox, and add some JavaScript code to the page that generates the Jukebox.
First, create a directory to put the Jukebox html files and the midi files into. Calling it something logical, like "midi" or "jukebox" makes sense, but it's up to you.
Copy the following and save it as "minijuke.html" :
<![CDATA[<FRAMESET ROWS="75,30,*" FRAMEBORDER=no BORDER=0>
<!--
// ==================================
// Mini Jukebox
// (c)1997 Ron Taylor Crouch
// http://www.ralphart.com
//
//
// Use it, just keep the notice here!
// ==================================
-->
<!-- If you want a border between frames, -->
<!-- set frameborder to "yes" and border to a number -->
<FRAME SRC="minipix.html" NAME="JukeGraphic" marginheight=0 marginwidth=0 SCROLLING="NO">
<FRAME SRC="minilist.html" NAME="Jukeselect" marginheight=0 marginwidth=0 SCROLLING="NO">
<FRAME SRC="miniplay.html" NAME="playback" marginheight=0 marginwidth=0 >
</FRAMESET>
<NOFRAMES>
<BODY>
Alas, your browser doesn't do frames.
</BODY>
</NOFRAMES>]]>
Next copy the following and save it as minilist.html -- it does the selecting of songs.
<![CDATA[
<HTML>
<HEAD>
<TITLE>Javascript Jukebox Lite</TITLE>
<!--
// ==================================
// Mini Jukebox
// (c)1997 Ron Taylor Crouch
// http://www.ralphart.com
//
//
// Use it, just keep the notice here!
// ==================================
-->
<SCRIPT LANGUAGE="JAVASCRIPT">
<!-- begin hiding
function author(){
alert( "\n" +
"The JavaScript Jukebox was written \n" +
"by Ron Crouch of Ralph Art Design \n" +
"\n" +
"http://www.ralphart.com \n") +
"\n"
}
function Playsong(){
choice=document.Playback.Playlist.selectedIndex;
file=document.Playback.Playlist.options[choice].value;
if (file=="rtc") {author(); return;}
if (file=="x") return;
parent.frames[2].location.href = file;
}
// end hiding -->
</SCRIPT>
</HEAD>
<BODY BGCOLOR="#FFFFFF">
<FORM name="Playback">
<CENTER>
<SELECT NAME="Playlist">
<OPTION value="x">Choose a song!
<OPTION value="miniplay.html">*-- Stop song --*
<OPTION value="rtc">about Mini-Jukebox
<OPTION value="peanuts.html">Peanuts
<OPTION value="bugler.html">Bugler's Holiday
<OPTION value="synclck.html">Syncopated Clock
<OPTION value="sleighrd.html">Sleighride
</SELECT><INPUT NAME="playit" TYPE="button" VALUE="Play!" onClick="Playsong()"></CENTER>
</FORM>
</BODY>
</HTML>
]]>
Copy the following and save it as "minipix.html" :
<![CDATA[<HTML>
<HEAD>
<!--
// ==================================
// Mini Jukebox
// (c)1998 Ron Taylor Crouch
// http://www.ralphart.com
//
//
// Use it, just keep the notice here!
// ==================================
-->
<TITLE>Jukebox Player</TITLE>
</HEAD>
<BODY BGCOLOR="#FFFFFF">
<CENTER>
<IMG SRC="juke.gif" ALT="Jukebox" WIDTH=160 HEIGHT=64>
</CENTER>
</BODY>
</HTML>]]>
Then download the
Jukebox graphic and save it in your Jukebox directory as "juke.gif" (with Netscape, right-clicking on the link will allow you to save the link) or create your own graphic.
Next copy the following and save it as "miniplay.html"
<![CDATA[<HTML>
<HEAD>
<TITLE>Javascript Jukebox</TITLE>
<!--
// ==================================
// Mini Jukebox
// (c)1997 Ron Taylor Crouch
// http://www.ralphart.com
//
//
// Use it, just keep the notice here!
// ==================================
-->
<BODY>
<!-- This is a dummy page. Necessary as a placeholder. -->
</BODY>
</HTML>]]>
Next, copy and save the following as "peanuts.html"
<![CDATA[<HTML>
<BODY BGCOLOR="#FFFFFF">
<CENTER>
<embed SRC="peanuts.mid" autostart=true LOOP=1
WIDTH=2 HEIGHT=0>
</CENTER>
<BR>
</BODY>
</HTML><BR>]]>
and save the file
peanuts.mid to your midi directory, giving it the name "peanuts.mid" (with Netscape, right-clicking on the above
link will allow you to save the link).
Create your other pages of embedded MIDI files using this as a template. Until you create other HTML pages with embedded MIDI's, only the Peanuts choice will work. Once you get the Jukebox working with your other songs, you can, of course, get rid of the files "peanuts.html" and "peanuts.mid" and the Peanuts choice in the songlist.
A couple of things to note here: don't forget the final
<![CDATA[<BR>]]> tag after the final
<![CDATA[</HTML>]]> tag. For some JavaScript reason, the Jukebox likes it to be there.
Copy and paste the following into the
<![CDATA[<HEAD>]]> section of the page you are calling Mini-Jukebox from:
<![CDATA[<SCRIPT LANGUAGE="JAVASCRIPT">
<!-- start hiding
function MiniJukeWin(){
open("minijuke.html","Jukebox","toolbar=no,width=220,height=100");
}
//-->
</SCRIPT>]]>
If you find it necessary to adjust the width of the Mini-Jukebox because the play button is not visible (this can happen if your song titles are longer than my sample titles), change the
<![CDATA[width=220]]> number to a larger value -- say 250 or 300. A little experimentation will find the ideal width. Just for good measure be sure to test with both Netscape and Microsoft Internet Explorer if possible; they WILL display things slightly differently.
Paste the following where you want the button that generates the Mini-Jukebox:
<![CDATA[
<FORM>
<Input type="button" name="Juke" value="JavaScript Jukebox" onclick="MiniJukeWin()">
</FORM>
]]>
Troubleshooting
Not working? Check the Troubleshooting page for suggestions.
