The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> Implementing MIDI control by clicking on image, on any web browser (chrome doesn't work)
GUIGUI
post 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
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Frederiek
post 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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
GUIGUI
post 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?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post 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
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
GUIGUI
post Feb 27 2011, 07:44 AM
Post #5





Group: Members
Posts: 5
Joined: 26-February 11
Member No.: 13,992



QUOTE(pandy @ Feb 27 2011, 07:32 AM) *

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
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post 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. wacko.gif

Can you link to a page where you have this running?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
GUIGUI
post Feb 27 2011, 09:32 AM
Post #7





Group: Members
Posts: 5
Joined: 26-February 11
Member No.: 13,992



QUOTE(pandy @ Feb 27 2011, 09:13 AM) *

But FF and Opera don't understand document.all. wacko.gif

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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post 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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Frederiek
post 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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Feb 28 2011, 06:52 AM
Post #10


.
********

Group: WDG Moderators
Posts: 9,630
Joined: 10-August 06
Member No.: 7



QUOTE(pandy @ Feb 27 2011, 03:13 PM) *

But FF and Opera don't understand document.all. wacko.gif

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>
User is online!PM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
GUIGUI
post 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
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 28th March 2024 - 07:56 PM