Setting up the Original JavaScript Jukebox
This is the corrected (as of 8-14-98) version 2.2 of the original JavaScript Jukebox, which adds some minor improvements: hitting the Jukebox button from the page that calls it now returns focus to the Jukebox, bringing it to the top of your desktop, rather than reloading it completely. This version traps out Microsoft Internet Explorer version 4, avoiding certain error messages.
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.
Next copy the following and add it to a file and save it as "jukebox.html" :
<![CDATA[
<title>Javascript Jukebox</title>
<script language="JAVASCRIPT">
<!-- start hiding
function reSet(){
}
// end hiding -->
</script>
<script language="JAVASCRIPT1.1">
<!-- start hiding
function reSet(){
if(navigator.appName=="Netscape"){
parent.opener.JukeStatus(false);
}
}
// end hiding -->
</script>
<!--
----------------------------------------------
The JavaScript Jukebox
Version 2.1 (7-10-98)
Written by Ron Crouch
http://www.ralphart.com
Copyright 1996-97, Ron Crouch
Permission for non-commercial usage granted.
Please retain this copyright notice in source.
----------------------------------------------
-->
<frameset rows="74,*,28,25" frameborder="0" border=no
framespacing="0" onUnload="reSet()">
<frame src="jukebox3.html" name="JukeGif" scrolling="NO"
marginheight=0 marginwidth=0 noresize>
<frame src="jukebox2.html" name="Jukeselect"
marginheight=3 marginwidth=2 scrolling="AUTO">
<frame src="jukebox4.html" name="ExitButton" scrolling="NO"
marginheight=1 marginwidth=3 noresize>
<frame src="peanuts.html" name="Music" scrolling="NO"
marginheight=5 marginwidth=0 noresize>
</frameset>
<noframes>
If you are seeing this instead of the Javascript Jukebox,
download
<a href="http://home.netscape.com/download/index.html">
Netscape Navigator</a> and check out the fun!
</noframes>
]]>
This sets up the frames that hold the pieces of the Jukebox. The last
FRAME SRC section holds the URL for the default page that is played. Change this to your own musical taste.
If you prefer not to see the MIDI plug-in console, change the line that reads
<![CDATA[
<frameset rows="74,*,28,25" frameborder="0" border=no
]]>
to:
<![CDATA[
<frameset rows="74,*,28,1" frameborder="0" border=no
]]>
Next copy this and save it as the file "jukebox2.html" :
<![CDATA[
<html>
<head>
<title>Javascript Jukebox</title>
<!--
----------------------------------------------
The JavaScript Jukebox
Written by Ron Crouch
http://www.ralphart.com
Copyright 1996-98, Ron Crouch
Permission for non-commercial usage granted.
Please retain this copyright notice in source.
----------------------------------------------
-->
<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"
}
// end hiding -->
</script>
</head>
<body bgcolor="#DDDDFF">
<center>
<font size=-1>
<i><font size=-2>Wait for Song to Load</font></i><br>
<b>Jazz</b>
<br>
<a href="birdland.html" target="Music")>Birdland</a><br>
<a href="peanuts.html" target="Music")>Linus and Lucy</a><br>
<a href="take5.html" target="Music")>Take Five</a><br>
<a href="sing3.html" target="Music")>Sing, Sing, Sing</a><br>
<p>
<b>Classical</b><br>
<a href="partita.html" target="Music")>Partita</a><br>
<a href="dmacab.html" target="Music")>Danse Macabre</a><br>
<a href="rhapsody.html" target="Music")>Rhapsody In Blue</a><br>
<a href="petewolf.html" target="Music")>Peter & the Wolf</a><br>
<p>
<a href="http://www.ralphart.com/midi/jukehelp.html"
target="newwindow"><b>Help & Info</b></a>
<form>
<input type="button" name="Juke" value="About Jukebox" onclick="author()">
</form>
</center>
</font>
</center>
</body>
</html>
]]>
The above is fairly simple -- a series of HTML pages with the TARGET="Music" attribute. This is your song list. To change your song list, change the lines that say
<![CDATA[<a href="peanuts.html" target="Music")>Linus and Lucy</a><br>]]>
to another HTML page that you've created with an embedded MIDI file, and change the song title.
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. Also, changing the attributes of the embedded MIDI file may take some experimenting. If you don't want the controls on the Jukebox (whether the slider works is dependent upon the sound driver in use) leave off the following:
CONTROLS=SMALLCONSOLE
and change the width and height attributes to the following:
WIDTH=2 HEIGHT=0
Warning: changing both height and width to zero can crash your browser. If you do away with the controls, be sure and change the following line in "jukebox.html" from:
<![CDATA[
<frameset rows="74,*,28,25" frameborder="0" border=no
]]>
to:
<![CDATA[
<frameset rows="74,*,28,1" frameborder="0" border=no
]]>
Next copy the following and save it as "jukebox3.html" :
<![CDATA[
<html>
<head>
<!--
----------------------------------------------
The JavaScript Jukebox
Written by Ron Crouch
http://www.ralphart.com
Copyright 1996-98, Ron Crouch
Permission for non-commercial usage granted.
Please retain this copyright notice in source.
----------------------------------------------
-->
<title>Jukebox Player</title>
</head>
<body bgcolor="#FFFFFF">
<center>
<img src="juke2.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.
Finally, copy the following and save it as "jukebox4.html" :
<![CDATA[
<html>
<head>
<!--
----------------------------------------------
The JavaScript Jukebox
Written by Ron Crouch
http://www.ralphart.com
Copyright 1996-97, Ron Crouch
Permission for non-commercial usage granted.
Please retain this copyright notice in source.
----------------------------------------------
-->
<title>Exit Button</title>
<script language="JAVASCRIPT">
<!-- begin hiding
function Endit()
{
parent.close()
}
ButtName = "Close"
// end hiding -->
</script>
</head>
<body bgcolor="#FFFFFF">
<center>
<form>
<input type ="button" name="CloseWindow" value="Close" onclick="Endit()">
</form>
</center>
</body>
</html>
]]>
All this does is create a button that closes the Jukebox down.
The last step is to add the code that calls the Jukebox from a page. Cut and paste the following in the
<![CDATA[<head>]]> section of your page:
<![CDATA[
<script language="JAVASCRIPT">
<!-- start hiding
// ==================================
// JavaScript Jukebox
// (c)1996-98 Ron Taylor Crouch
// http://www.ralphart.com
//
// Use it, just keep the notice here!
// ==================================
function JukeWin(){
open("jukebox.html","Jukebox","toolbar=no,width=200,height=360");
}
//-->
</script>
<script language="JAVASCRIPT1.1">
<!-- start hiding
// Note this section uses LANGUAGE JAVASCRIPT1.1
// This adds improvements for people using Netscape 3 or above --
// hitting the 'Jukebox' button returns focus to the Jukebox
// if it is already open, rather than reloading it.
// Trapping out non-Netscape (MSIE) browser added 8-14-98.
var WinOpen=false
function JukeStatus(a){
WinOpen=a;
}
function JukeWin(){
if(navigator.appName != "Netscape"){
Jukebox=open("jukebox.html","Jukebox","toolbar=no,width=200,height=360");
}
else {
if(WinOpen==false){
Jukebox=open("jukebox.html","Jukebox","toolbar=no,width=200,height=360");
JukeStatus(true);
}
if(navigator.appName=="Netscape"){
Jukebox.focus();
}
}
}
// end hiding -->
</script>
]]>
making sure there are no line wraps. Turn off wordwrap on your editor if you are not sure. Make sure the path in "function JukeWin" to "jukebox.html" is correct. Then paste the following where you want the button that starts the Jukebox:
<![CDATA[
<form>
<input type="button" name="Juke" value="JavaScript Jukebox" onclick="JukeWin()">
</form>
]]>
If you want to change what the button says, edit the section that says
value="JavaScript Jukebox"
to say what ever you want.
Troubleshooting
Not working? Check the Troubleshooting page for suggestions.
