asked on

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

-null-

Hi

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

-null-

Michel Plungjan

it is the ".all" that does not work in FF

try

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

ChefMaha

ASKER

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

Michel Plungjan

I suggest you use FLASH. Only thing that is compatible across browsers

ChefMaha

ASKER

you mean using Macromedia Flash?

so there is no other script or code that is compatible for all browsers?

Michel Plungjan

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.

ChefMaha

ASKER

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

Michel Plungjan

It is a lot to look through and most are shareware, but start here:

http://www.google.com/search?q=free+flash+play+sound+onclick
http://www.google.com/search?q=free+flash+sound+button

ChefMaha

ASKER

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?

ChefMaha

ASKER

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

ASKER CERTIFIED SOLUTION

Michel Plungjan

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

ChefMaha

ASKER

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.

Michel Plungjan

the script I pasted works in FF 3.0.6 on my Xp

ChefMaha

ASKER

you are absolutely right buddy.

thanks alot mplungjan =)