Implementing MIDI control by clicking on image, on any web browser (chrome doesn't work)
Question
I have been hit with some problems on my html coding that is, at first glance,simple, but I can't manage to solve it. Any help is welcome. Very important: I want this code working by only using HTML and Javascript But CSS is allowed too.
I am trying to make where a MIDI music (it has to be MIDI) would play when you click on a image ( I don't want it to start when you open the page, but to start only when you click on the image) and stop when you click on an other one. I have managed to make a code that work on Firefox and Opera, but it won't work on MS IE nor Chrome:
<html>
<head>
<script LANGUAGE="JavaScript">
function switchOn(){
document.all.changetrack.data = "knight.mid";
}
function switchOff(){
document.all.changetrack.data ="none.mid";
}
//-->
</SCRIPT>
</head>
<body>
<a onclick="switchOn()"><img src="play.gif" border="0"/></a><a onclick="switchOff()"><img src="stop.gif" border="0"/></a>
<br>
<OBJECT name="changetrack" type="audio/x-midi" data="none.mid">
<PARAM name="autostart" value="true">
<PARAM name="loop" value="true">
<PARAM name= "hidden" value="true">
</OBJECT>
<br>
<object data="knight.mid">
<param name="autostart" value="false">
<PARAM name= "hidden" value="true">
If you're seeing this, you don't have a MIDI player
on your computer.
</object>
</body>
</html>
I am not sure, but it seems that while the change of file is actually done, the autostart don't activate the music on IE and Chrome.
I have also manage to create an "hybrid" version that work on MS IE, by "cheating" a bit and using the tag:
<html>
<head>
<BGSOUND SRC="none.mid" ID="changemusic" loop="infinite">
<script LANGUAGE="JavaScript">
<!--
function switchOn(){
document.all.changemusic.src = "knight.mid"
document.all.changetrack.data = "knight.mid"
}
function switchOff(){
document.all.changemusic.src ="none.mid"
document.all.changetrack.data ="none.mid"
}
//-->
</SCRIPT>
</head>
<body>
<a onclick="switchOn()"><img src="play.gif" border="0"/></a><a onclick="switchOff()"><img src="stop.gif" border="0"/></a>
<br>
<OBJECT name="changetrack" type="audio/x-midi" data="none.mid">
<PARAM name="autostart" value="true">
<PARAM name="loop" value="true">
<PARAM name= "hidden" value="true">
</OBJECT>
<br>
<object data="knight.mid">
<param name="autostart" value="false">
<PARAM name= "hidden" value="true">
If you're seeing this, you don't have a MIDI player
on your computer.
</object>
</body>
</html>
But it still (of course) won't work on Chrome. Any solution to make it work on Chrome?
I really would like a single code able to work on all Browsers.
Thanks in advance.
(also, I have already tried to do it with the the tag, it only work with Firefox)
1 answers
solution1
0 2011-03-03 18:01:55
I've seen a solution for this problem only for IE till now:
<embed src="music.mid" hidden="true" type="audio/midi" autostart="0" loop="1" name="myMidiMusic"/>
<img src="play.png" onclick="document.myMidiMusic.play()"/>
<img src="stop.png" onclick="document.myMidiMusic.stop()"/>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.