Having a problem that I can't seem to find a solution for. I am using a picture as a button for my site and when you click the picture it brings you to the main page of the website. My problem is that I want the button to make a sound when it is clicked on. I figured that Javascript would be the best language to use since I know nothing about Flash.

Any help here? Thanks.

<html>
<head>
<title>Testing buttons</title>
<script language="javascript" type="text/javascript">
function playSound(soundfile) {
document.getElementById("dummy").innerHTML=document.getElementById("dummy").innerHTML +
"<embed src=\""+soundfile+"\" hidden=\"true\" autostart=\"true\" loop=\"false\" />";
}
</script>
</head>
<body>
<a href="link.html" id="dummy">
<img src="enter.jpg" onclick="playSound('boom.wav');">
</a>
</body>
</html>

TIA

Here is the Javascript:

<script>
function EvalSound(soundobj) {
  var thissound=document.getElementById(soundobj);
  thissound.Play();
}
</script>
<embed src="boom.wav" autostart=false width=0 height=0 id="boom"
enablejavascript="true">

And here is the HTML:

<input type="button" value="Play Sound" onClick="EvalSound('boom')">

Try this out, hopefully this helps! If so don't forget to close the thread : )

Thanks for the response but that's not exactly what I am looking for. What you posted works, but I need that button to be a picture, and I also need it to be a link to a different page as well as play that sound.

Any ideas?

Well, this may work:

<form action="www.domain.com/link.html"><input type="image" src="enter.jpg" alt="Image Button"></form>

Hopefully this worked for you, let me know : )

Where in the above code does it link to the sound file? I know how to make a picture a link, but I need it to play a sound as well.

My bad here is what you need:

<form action="www.domain.com/link.html"><input type="image" value="Play Sound" onClick="EvalSound('boom')" src="enter.jpg" alt="Image Button"></form>

- The the onClick function will get the boom.wav from the embed

Still not doing it...here is my latest:

<html>
<head>
<title>Testing buttons</title>
<script>
function EvalSound(soundobj) {
  var thissound=document.getElementById(soundobj);
  thissound.Play();
}
</script>
<embed src="boom.wav" autostart=false width=0 height=0 id="boom"
enablejavascript="true">
</head>

<form action="link.html"><input type="image" value="Play Sound" onClick="EvalSound('boom')" src="enter.jpg" alt="Image Button"></form>

</body>
</html>

I think that using the <embed> tag it makes other browsers besides IE play the sound right away when the page loads, which I don't want.

Ok well try this instead, this should work. Let me Know.


<!DOCTYPE html>

<html>
<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>Testing buttons</title>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>

<script type="text/javascript">
function EvalSound(soundobj) {
var thissound=document.getElementById(soundobj);
thissound.Play();
}
</script>
</head>

<body>
<embed src="boom.wav" autostart=false width=0 height=0 id="boom"
enablejavascript="true">

<form action="link.html"><input type="image" value="Play Sound" onClick="EvalSound('boom')" src="enter.jpg" alt="Image Button"></form>

</body>
</html>

No still did not work. I only get the sound to play in a non-IE browser and it plays when the page is loaded not when it is clicked on. On internet explorer I hear nothing at all.

Thanks for continuing to help with this.

No problem, I will look into this more tomorrow. I am not at home but will check to see what I missed tomorrow : )

This is the script will work what you want

<!DOCTYPE html>

<html>
<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>Testing buttons</title>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>

<script type="text/javascript">
function EvalSound(soundobj) {
var thissound=document.getElementById(soundobj);
thissound.Play();
}
</script>
</head>

<body>
<bgsound id="soundfiles"> 
<script language="JavaScript">
// PLACE YOUR SOUND FILES BELOW 
var aySound = new Array(); 
aySound[0] = "Blip.wav"; 
aySound[1] = "DING.wav"; 
aySound[2] = "CHORD.wav"; 

// Don't alter anything below this line 
IE = (navigator.appVersion.indexOf("MSIE")!=-1 && document.all)? 1:0; 
NS = (navigator.appName=="Netscape" && navigator.plugins["LiveAudio"])? 1:0; 
ver4 = IE||NS? 1:0; 
onload=auPreload; 
function auPreload()
{ 
if (!ver4) return; 
if (NS) 
auEmb = new Layer(0,window); 
else { 
Str = "<DIV ID='auEmb' STYLE='position:absolute;'></DIV>";
document.body.insertAdjacentHTML("BeforeEnd",Str); 
}
var Str = ''; 
for (i=0;i<aySound.length;i++) 
Str += "<EMBED SRC='"+aySound[i]+"'AUTOSTART='FALSE' HIDDEN='TRUE'>" 
if (IE) auEmb.innerHTML = Str; 
else 
{
auEmb.document.open(); 
auEmb.document.write(Str); 
auEmb.document.close(); 
} 
auCon = IE? document.all.soundfiles:auEmb; auCon.control = auCtrl; } 
function auCtrl(whSound,play) { 
if (IE) this.src = play? aySound[whSound]:''; 
else eval("this.document.embeds[whSound]." + (play? "play()":"stop()")) 
} 

function playSound(whSound) { 
if (window.auCon) auCon.control(whSound,true);
[B]popupWin = window.open('http://webdesign.about.com/', 'open_window', 'menubar, toolbar, location, directories, status, scrollbars, resizable, dependent, width=640, height=480, left=0, top=0')[/B]} 
function stopSound(whSound) { if (window.auCon) auCon.control(whSound,false); } 
</script> 
<img src="enter.jpg" onClick="playSound(0)">
</body>
</html>

Hey that worked pretty well. Is there a way to make the link not open in a new window? Also it only works in IE, not Opera.

Try replacing this:

function playSound(whSound) { 
if (window.auCon) auCon.control(whSound,true);
popupWin = window.open('http://webdesign.about.com/', 'open_window', 'menubar, toolbar, location, directories, status, scrollbars, resizable, dependent, width=640, height=480, left=0, top=0')} 
function stopSound(whSound) { if (window.auCon) auCon.control(whSound,false); }

With this instead:

function playSound(whSound) { 
if (window.auCon) auCon.control(whSound,true);
popupWin = window.open('http://webdesign.about.com/', 'open_window', 'menubar, toolbar, location, directories, status, scrollbars, resizable, dependent, fullscreen')} 
function stopSound(whSound) { if (window.auCon) auCon.control(whSound,false); }

This will open the window in fullscreen, so that it does not open weird.

Updated it, it should work now : )

Is there a way to open the page in the same window?

Anything new with this? I need it to open in the same window...I also am having trouble getting it to work with other browsers. IE seems to be the only one it works with.

Thanks.