Implementing MIDI control by clicking on image, on any web browser (chrome doesn't work) |
Implementing MIDI control by clicking on image, on any web browser (chrome doesn't work) |
GUIGUI |
Feb 26 2011, 09:58 AM
Post
#1
|
Group: Members Posts: 5 Joined: 26-February 11 Member No.: 13,992 |
Hello, folks. I am kind of new, but 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.
I am trying to make a page only using html and Javascript where a MIDI would play when you click on a image (it won't start when you open the page, it only start 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: CODE <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 have also manage to create an "hybrid" version that work on MS IE, by "cheating" a bit and using the <BGSOUND> tag: CODE <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? Thanks in advance. (also, the <embed> tag only work with Firefox) This post has been edited by GUIGUI: Feb 26 2011, 10:02 AM |
Frederiek |
Feb 27 2011, 04:50 AM
Post
#2
|
Programming Fanatic Group: Members Posts: 5,146 Joined: 23-August 06 From: Europe Member No.: 9 |
"document.all" is MSIE proprietary javascript coding. Use the DOM.
|
GUIGUI |
Feb 27 2011, 05:18 AM
Post
#3
|
Group: Members Posts: 5 Joined: 26-February 11 Member No.: 13,992 |
What's the DOM?
How do I use it? |
pandy |
Feb 27 2011, 07:32 AM
Post
#4
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,716 Joined: 9-August 06 Member No.: 6 |
I don't know in this case. Sound is tricky in my experience. But I wonder if you meant it works in only IE rather than not work in only IE since the only browser that understands document.all is - IE.
I'll move this to the JavaScript forum for you. Hopefully someone else knows |
GUIGUI |
Feb 27 2011, 07:44 AM
Post
#5
|
Group: Members Posts: 5 Joined: 26-February 11 Member No.: 13,992 |
I don't know in this case. Sound is tricky in my experience. But I wonder if you meant it works in only IE rather than not work in only IE since the only browser that understands document.all is - IE. I'll move this to the JavaScript forum for you. Hopefully someone else knows Actually, the first code work on Firefox and Opera. IT ACTUALLY DOES NOT WORK ON IE NEITHER ON CHROME The second code work on IE because I added the <Background> on it. It still doesn't work on Chrome. I wish I could get a single code able to work on all browser. This post has been edited by GUIGUI: Feb 27 2011, 07:45 AM |
pandy |
Feb 27 2011, 09:13 AM
Post
#6
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,716 Joined: 9-August 06 Member No.: 6 |
But FF and Opera don't understand document.all.
Can you link to a page where you have this running? |
GUIGUI |
Feb 27 2011, 09:32 AM
Post
#7
|
Group: Members Posts: 5 Joined: 26-February 11 Member No.: 13,992 |
But FF and Opera don't understand document.all. Can you link to a page where you have this running? No, as it is not online yet, but you should have no difficulty putting the code in notepad and save it as an html document, and then simply open it with any of your Browsers. |
pandy |
Feb 27 2011, 09:47 AM
Post
#8
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,716 Joined: 9-August 06 Member No.: 6 |
The reason I asked you to link to a page wasn't laziness. But I confess, I'm lazy too and I don't want to find a midi file and edit the HTML either. Hope someone else is more energetic.
|
Frederiek |
Feb 28 2011, 03:11 AM
Post
#9
|
Programming Fanatic Group: Members Posts: 5,146 Joined: 23-August 06 From: Europe Member No.: 9 |
QUOTE What's the DOM? See http://en.wikipedia.org/wiki/Document_Object_Model. Also follow the link to W3C. And go see http://www.javascriptkit.com/domref/ . At javascriptkit.com you'll find tutorials, references and free scripts, where you probably even will find what you are looking for. |
Christian J |
Feb 28 2011, 06:52 AM
Post
#10
|
. Group: WDG Moderators Posts: 9,630 Joined: 10-August 06 Member No.: 7 |
But FF and Opera don't understand document.all. Actually FF2+ and Opera9+ (and at least the newest Webkit browsers) do understand it: http://www.mozillazine.org/talkback.html?article=5063 but only when they want to and not when you test for it with e.g. CODE if(document.all) Here's an example (Firefox also needs to be in quirksmode): CODE <div id="foo">some text</div> <script type="text/javascript"> var x=document.all['foo'].innerHTML; alert(x); </script> |
GUIGUI |
Feb 28 2011, 12:42 PM
Post
#11
|
Group: Members Posts: 5 Joined: 26-February 11 Member No.: 13,992 |
I have reworked the code to be W3C compliant, I hope it respect the DOM, this time. But it still only work in FireFox and Opera. It still doesn't work in Explorere nor Chrome:
CODE <!DOCTYPE html> <html> <head> <title>MIDI Player</title> <script type="text/javascript"> <!-- function switchOn(){ document.changetrack.data = "knight.mid"; } function switchOff(){ document.changetrack.data = "none.mid"; } //--> </script> </head> <body> <img src="play.gif" alt="play" border="0" onclick="switchOn()" /><img src="stop.gif" alt="stop" onclick="switchOff()" /> <br /> <object name="changetrack" type="audio/x-midi" data="none.mid"> <param name="autostart" value="true" /> <param name="loop" value="true" /> </object> </body> </html> Any idea to make it work on Chrome and IE? This post has been edited by GUIGUI: Feb 28 2011, 12:58 PM |
Lo-Fi Version | Time is now: 28th March 2024 - 07:56 PM |