• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 1172
  • Last Modified:

play a sound at click on image: compatible with all browsers

Hi... I got my code to work perfectly on IE (click on image plays sound). But, when I try to run it using Firefox, clicking the image does absolutely nothing.

How can I change my code to let it be compatible on all browsers?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Medicine Pronounciation</title>
<SCRIPT LANGUAGE="JavaScript">
 
  function EvalSound(soundobj)
  {
           document.all.sound.src = eval("document.embeds('" + soundobj + "').src");
  }
</SCRIPT>
</head>
 
<body>
  <bgsound id="sound"/>
  
  <table cellpadding=10px>
  <tr>
  <td>
  <embed src="sounds/rap.wav" autostart=false hidden=false id="sound1" name="sound1"/>
  <a href="#"><img border=0 onClick="EvalSound('sound1');" src="images/IceAge.jpg"></a>
  </td>
 
 <td>
  <embed src="sounds/flinstones.wav" autostart=false hidden=false id="sound2" name="sound2"/>
  <a href="#"><img border=0 onClick="EvalSound('sound2');" src="images/KungFuPanda.jpg"></a>
  </td>
  </tr>
  </table>
</body> 
</html>

Open in new window

0
ChefMaha
Asked:
ChefMaha
  • 7
  • 6
1 Solution
 
-null-Commented:
Hi

Don't think firefox will play wave files without a plugin being installed.

-null-
0
 
Michel PlungjanIT ExpertCommented:
it is the ".all" that does not work in FF

try


function EvalSound(soundObjectId)   {
    document.getElementById(soundObjectId).play();
}

0
 
ChefMahaAuthor Commented:
thanks for replying.

-null-: I already installed the required plugin

mplungjan: I tried your code.. but same result. take a look:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Medicine Pronounciation</title>
<SCRIPT LANGUAGE="JavaScript">
/*
  function EvalSound(soundobj)
  {
           document.all.sound.src = eval("document.embeds('" + soundobj + "').src");
  }
  */
 
  function EvalSound(soundObjectId)   {
   document.getElementById(soundObjectId).play();
}
 
</SCRIPT>
</head>
 
<body>
  <bgsound id="sound"/>
  
  <table cellpadding=10px>
  <tr>
  <td>
  <embed src="sounds/rap.wav" autostart=false hidden=false id="sound1" name="sound1"/>
  <a href="#"><img border=0 onClick="EvalSound('sound1');" src="images/IceAge.jpg"></a>
  </td>
 
 <td>
  <embed src="sounds/flinstones.wav" autostart=false hidden=false id="sound2" name="sound2"/>
  <a href="#"><img border=0 onClick="EvalSound('sound2');" src="images/KungFuPanda.jpg"></a>
  </td>
  </tr>
  </table>
</body> 
 
 
</html>

Open in new window

0
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
Michel PlungjanIT ExpertCommented:
I suggest you use FLASH. Only thing that is compatible across browsers
0
 
ChefMahaAuthor Commented:
you mean using Macromedia Flash?

so there is no other script or code that is compatible for all browsers?
0
 
Michel PlungjanIT ExpertCommented:
No.

For example the .play() method is not supported by QuickTime so if you installed QT it takes over playing of wav files on windows browsers and the script fails.
0
 
ChefMahaAuthor Commented:
thanks for your help mplungjan.

 However, I'd appreciate it if you could further explain what you mean exactly: How can I achieve this browser compatible sound production? and where do I start? any advice?

thanks alot
0
 
Michel PlungjanIT ExpertCommented:
0
 
ChefMahaAuthor Commented:
hey mplungjan.

I found a website that plays sound using firefox (in pure javascript): http://www.phon.ucl.ac.uk/home/mark/audio/play.htm

when I open this website using firefox, the sound plays perfectly on my machine. However, when I used the same code used to play sound on that page - on my local web page, it doesn't work!

any clue?
0
 
ChefMahaAuthor Commented:
this is my code btw. I used the exact same methodology they are using - in my first embed.
here, take a look:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Medicine Pronounciation</title>
<SCRIPT LANGUAGE="JavaScript">
 
function EvalSound(soundobj){
	   var thissound=document.getElementById(soundobj);
	  thissound.Play();
	}
 
</SCRIPT>
</head>
 
<body>
  <bgsound id="sound">
 
  <table cellpadding=10px>
  <tr>
  <td>
  <embed src="sounds/rap.wav" autostart=false hidden=false id="sound1" name="sound1"/>
  <form>
<input type="button" value="Play Sound" onClick="EvalSound('sound1')">
</form>
<!--
  <a href="#"><img border=0 onClick="EvalSound('sound1');" src="images/IceAge.jpg"></a>-->
  </td>
 
 <td>
  <embed src="sounds/flinstones.wav" autostart=false hidden=false id="sound2" name="sound2"/>
  <a href="#"><img border=0 onClick="EvalSound('sound2');" src="images/KungFuPanda.jpg"></a>
  </td>
  </tr>
  </table>
</body> 
 
 
</html>

Open in new window

0
 
Michel PlungjanIT ExpertCommented:
You missed
enablejavascript="true"

      <script>
      function EvalSound(soundobj) {
        var thissound=document.getElementById(soundobj);
        thissound.Play();
      }
      </script>
 
      <embed src="success.wav" autostart=false width=0 height=0 id="sound1"
      enablejavascript="true">
 
      <form>
      <input type="button" value="Play Sound" onClick="EvalSound('sound1')">
      </form>

Open in new window

0
 
ChefMahaAuthor Commented:
still not working :(

btw, I tried setting the embed tag to autostart=true (so that it would play as soon as the page is loaded). That worked perfectly (on firefox). But, as soon as I bind the sound playing with an event, it doesn't work.
0
 
Michel PlungjanIT ExpertCommented:
the script I pasted works in FF 3.0.6 on my Xp
0
 
ChefMahaAuthor Commented:
you are absolutely right buddy.

thanks alot mplungjan =)
0

Featured Post

Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

  • 7
  • 6
Tackle projects and never again get stuck behind a technical roadblock.
Join Now