Hi,

I have embedded a midi file in an HTML page and want to give the user control over when to start it (and/or start and stop it) using a client-side image map.

I found a number of JavaScripts that didn't work. Some provide control over volume.

I'd appreciate your help.
SK

Here is my code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<script language ="JavaScript">

function PlayIt(movname)
{
movname.Play();
}
function StopIt(movname)
{
movname.Stop();
}

function rewindIt(movname)
{
movname.rewind();
}
function SetRate(movname,rate)
{
movname.SetRate(rate);
}
function SetTime(movname,time)
{
movname.SetTime(time);
}
function VolumeIt()

{ curvol=document.volform.level.value;
Icurvol=parseInt(curvol);
document.jesu1.SetVolume(Icurvol);

}

function downvol()

{ nowvol=document.jesu1.GetVolume();
nowvol=nowvol-10;
if(nowvol<0) { nowvol=0 };

document.jesu1.SetVolume(nowvol);

document.imagemapform.levelindicator.value=nowvol
}

function upvol()

{ nowvol=document.jesu1.GetVolume();
nowvol=nowvol+10;
if(nowvol>255) { nowvol=255 };

document.jesu1.SetVolume(nowvol);
document.imagemapform.levelindicator.value=nowvol ;
}

</script>
</head>

<EMBED NAME="tester" SRC="music.mid" MASTERSOUND HIDDEN=TRUE autostart=false volume=100%><body>

<img src="imgs/harp.jpg" alt="Harp" width="360" height="576" border="0" usemap="#Map" />
<map name="Map" id="volmap">
<area shape="poly" coords="153,238,252,112,289,537,175,469" alt="Play" HREF="javascriptlayit()"/>
<area shape="poly" coords="61,393,106,394,131,408,126,424,159,451,161,461,93,427,102,459,69,431,60,412" alt="Stop" HREF="javascript:stopit()"/>
<area shape="circle" coords="282,54,33" alt="Volumeup" HREF="javascript:upvol()" onMouseOver="upvol()"/>
<area shape="poly" coords="220,74,238,92,115,245,93,234" alt="Quiet" HREF="javascript:downvol()" onMouseOver="downvol()"/>
</map>

</body>
</html>