|
This page is not a tutorial. I'm showing the HTML and JavaScript code that I use on my site, for the curious.
I haven't included a whole lot of explanation.
The HTML File
Here's the contents of the EMBED HTML file for this song. The BGSOUND one is very much the same, but with a BGSOUND
instead of an EMBED.
<html>
<head>
<title> Music </title>
</head>
<body>
<center>
<table border="3" bordercolor="#999900"
cellpadding="25" cellspacing="0">
<tr> <td align="center">
<embed src="AFoolLikeMeYouWinAgain.mid"
loop="true" repeat="true" autostart="true"
width="200" height="60" />
<p>
<font color="red" face="comic sans ms, arial, helvetica">
A Fool Like Me You Win Again
<p>
From <a href="http://www.MIDIFest.com/"
target="_blank">Vikram's MIDI-Fest</a>
</font>
</td> </tr> </table>
</center>
</body>
</html>
|
You can see how this looks by right-clicking the music link above and selecting "open in new window."
Generating the music selection table
The music selection table is generated by a JavaScript. This is the code that is included in this
page to generate the table:
<script language="JavaScript" type="text/javascript">
gSongUrl1 = GenMusicName ("../../", "AFoolLikeMeYouWinAgain");
gSongTitle1 = "A Fool Like Me You Win Again";
gSongSize1 = "25";
gSongLen1 = "2:44";
gSongHelpPre = "../../";
GenMusicTable();
</script>
|
A function named GenMusicTable() generates the actual table. Rather than passing a large number of
parameters to it, I chose to put the parameters into a series of global variables. For each song
name to include, four parameters are set: gSongUrl#, gSoneTitle#, gSongSize# and gSongLen# (# is 1 for
the first song, 2 for the next, etc).
The GenMusicName() function builds the URL for the HTML file to generate. It does the browser detection
and builds the URL to either the HTML file with the EMBED or the HTML file with the BGSOUND.
The gSongHelpPre is the prefix needed to find the help file. This HTML file is located in a directory two
levels down from where the help file is located, so it's set to "../../".
The GenMusicName() function
GenMusicName() has the job of building the URL of the HTML file to load.
//--- GenMusicName() ---
// zPre: "" for root, "../" for one level down, etc.
// zNam: Name of midi file (without .mid)
function GenMusicName (zPre,zNam) {
return zPre + "music/" + zNam + gBrow + ".html";
}
|
The "gBrow" variable is set during page loading. It gets set to "NN" for
EMBED (all NN versions and IE 4+), or to "IE" for BGSOUND (all other browsers). This is the
code used for that:
//--- Browser detect for music - IE uses BGSOUND, NN uses EMBED ---
var gBrow = "IE";
var gBrowVer = parseInt (navigator.appVersion);
if (navigator.appName == "Netscape") gBrow = "NN";
if (navigator.appName == "Microsoft Internet Explorer" &&
gBrowVer >= 4) gBrow = "NN";
|
The GenMusicTable() function
GenMusicTable() builds the music selection box you see at the top of this page.
//--- GenMusicTable() ---
function GenMusicTable() {
if ("" == gSongUrl1) return;
d = self.document;
d.writeln ('<form>');
d.writeln ('<table border=6 bgcolor="', gSongBgcolor, '"
cellpadding="8" cellspacing="0" bordercolor="',
gSongBordercolor, '">');
d.writeln (' <tr> <td align=center>');
d.writeln (' <font face="comic sans ms,arial,helvetica"
color=red> Music <br>');
d.writeln (' <font size=-1>');
d.writeln (' <select size=1>');
d.writeln (' <option selected> How to play music');
d.writeln (' <option> ----------------------------------');
d.writeln (' <option> Left-click to play music');
d.writeln (' <option> with no console.');
d.writeln (' <option> ----------------------------------');
d.writeln (' <option> To display a console:');
d.writeln (' <option> Right-click.');
d.writeln (' <option> Choose "Open in new window."');
d.writeln (' <option> ----------------------------------');
d.writeln (' <option> For more info, see Help!');
d.writeln (' </select>');
d.writeln (' </font> </font>');
d.writeln (' </td> </tr> <tr> <td>');
d.writeln (' <font face="comic sans ms,arial,helvetica">');
d.writeln (' <a href="', gSongUrl1, '" target="music">',
gSongTitle1, '</a>');
d.writeln (' <font size="-2"> ', gSongSize1, 'K midi - ',
gSongLen1, ' </font> <br>');
if ("" != gSongUrl2) {
d.writeln (' <a href="', gSongUrl2, '" target="music">',
gSongTitle2, '</a>');
d.writeln (' <font size="-2"> ', gSongSize2, 'K midi - ',
gSongLen2, ' </font> <br>');
}
if ("" != gSongUrl3) {
d.writeln (' <a href="', gSongUrl3, '" target="music">',
gSongTitle3, '</a>');
d.writeln (' <font size="-2"> ', gSongSize3, 'K midi - ',
gSongLen3, ' </font> <br>');
}
if ("" != gSongUrl4) {
d.writeln (' <a href="', gSongUrl4, '" target="music">',
gSongTitle4, '</a>');
d.writeln (' <font size="-2"> ', gSongSize4, 'K midi - ',
gSongLen4, ' </font> <br>');
}
if ("" != gSongUrl5) {
d.writeln (' <a href="', gSongUrl5, '" target="music">',
gSongTitle5, '</a>');
d.writeln (' <font size="-2"> ', gSongSize5, 'K midi - ',
gSongLen5, ' </font> <br>');
}
d.writeln (' </font>');
d.writeln (' </td> </tr> <tr> <td>');
d.writeln (' <font face="comic sans ms,arial,helvetica">');
d.writeln (' <a href="', gSongHelpPre, '"empty.html"
target="music">Stop Da Music!</a> <p>');
d.writeln (' <center>');
d.writeln (' <input type=button
onClick="OpenMusicHelp();" value="Help!">');
d.writeln (' </center>');
d.writeln (' </font>');
d.writeln (' </td> </tr>');
d.writeln ('</table>');
d.writeln ('</form>');
}
|
The "gBrow" variable is set in the index.html file of the top level. It gets set to "NN" for
EMBED (all NN versions and IE 4+), or to "IE" for IE 2 or 3.
The OpenMusicHelp() function
If the user clicks on the "help" button, one final function gets called. OpenMusicHelp() opens the help window.
//--- OpenMusicHelp() ---
function OpenMusicHelp () {
xOpts = "toolbar=no,location=no,directories=no,status=yes,
menubar=no,scrollbars=yes,resizable=yes,width=400,height=300"
xUrl = gSongHelpPre + "musichlp.html";
window.open (xUrl, "musichlp", xOpts);
return false;
}
|
|