Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New to the CF scene
    Join Date
    Nov 2009
    Posts
    3
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Creating a dropdown midi player

    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:

    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.

  • #2
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,240
    Thanks
    203
    Thanked 2,554 Times in 2,532 Posts
    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.

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • #3
    New to the CF scene
    Join Date
    Nov 2009
    Posts
    3
    Thanks
    1
    Thanked 0 Times in 0 Posts
    I've managed to get this code working in firefox, but will not work in chrome or IE:

    Code:
    <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?

  • #4
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,240
    Thanks
    203
    Thanked 2,554 Times in 2,532 Posts
    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

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •