Creating a dropdown midi player

[Travis959]

I am creating a "retro" styled website. With this, I am using certain elements of a website I created back in 2000.

One of the things I had back then was a dropdown menu that would play the midi file selected, and this still works, but only in Internet Explorer.

Firefox and Chrome will not play anything at all, and I know that bgsound is an Internet Explorer specific tag, but I have not found a way to get embed to work as well.

Here is my code:

   <form name="choose">
    	<select onChange="midiplay(this);" name="select">
        	<option value="#">No Music</option>
            <option value="midi/1.mid">Background 1</option>
            <option value="midi/2.mid">Background 2</option>
         </select>
    </form>
    <script language="JavaScript">
	var ie = (function(){
    var undef,
        v = 3,
        div = document.createElement('div'),
        all = div.getElementsByTagName('i');    
    while (
        div.innerHTML = '<!--[if gt IE ' + (++v) + ']><i></i><![endif]-->',
        all[0]
    );    
    return v > 4 ? v : undef;    
}());
		if (ie) {	
			document.write('<bgsound src="#" id="midijuke" loop="infinite" autostart="true" />');
			function midiplay(what) {
  				document.getElementsByTagName("*").midijuke.src = what.options[what.selectedIndex].value;
			}
		}
		if (!ie) {
			document.write('<embed src="#" id="midijuke" loop="999" height="0" width="0" autostart="true" />');
			function midiplay(what) {
  				document.getElementsByTagName("*").midijuke.src = what.options[what.selectedIndex].value;
			}
		}
	</script>

It acts like the embed code is not getting updated with the correct src.

[Philip M]

Have a look at

http://www.phon.ucl.ac.uk/home/mark/audio/play4.htm


All advice is supplied packaged by intellectual weight, and not by volume. Contents may settle slightly in transit.

[Travis959]

I've managed to get this code working in firefox, but will not work in chrome or IE:

<form name="music">
    <select name='audiomenu' onchange="midiplay(this);">
        <option value="">No Music</option>
        <option value="midi/1.mid">Background 1</option>
        <option value="midi/2.mid">Background 2</option>
     </select>
</form>
<script type="text/javascript">
function midiplay(what) {   
document.getElementById('midijuke').src = what.options[what.selectedIndex].value;
}
</script> 
<embed src="#" id="midijuke" autostart="true" loop="true" type="audio/midi" width="120" height="40"></embed>

Any ideas?

[Philip M]

Cross-browser rendering of sounds is a nightmare.

Have a look at e.g.

http://www.javascripter.net/faq/sound/play.htm

http://www.phon.ucl.ac.uk/home/mark/audio/play.htm