play sound when a link is clicked

Question

InsaneVr6 0 Light Poster

14 Years Ago

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

javascript

3 Contributors
17 Replies
3K Views
4 Days Discussion Span
Latest Post 14 Years Ago Latest Post by InsaneVr6

drewpark88 35 Junior Poster

14 Years Ago

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 : )

Edited 14 Years Ago by drewpark88 because: n/a

drewpark88 35 Junior Poster

14 Years Ago

Well, this may work:

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

drewpark88 35 Junior Poster

14 Years Ago

Hopefully this worked for you, let me know : )

drewpark88 35 Junior Poster

14 Years Ago

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

Edited 14 Years Ago by drewpark88 because: n/a

drewpark88 35 Junior Poster

14 Years Ago

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

<!DOCTYPE html>

<title>Testing buttons</title>

</body>
</html>

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

InsaneVr6 0 Light Poster · Answer 1 · 2010-05-26T04:34:52+00:00

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?

InsaneVr6 0 Light Poster · Answer 2 · 2010-05-26T05:44:47+00:00

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.

InsaneVr6 0 Light Poster · Answer 3 · 2010-05-26T07:50:32+00:00

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.

drewpark88 35 Junior Poster · Answer 4 · 2010-05-26T09:06:48+00:00

drewpark88 35 Junior Poster

14 Years Ago

Did that work?

InsaneVr6 0 Light Poster · Answer 5 · 2010-05-26T10:23:08+00:00

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.

drewpark88 35 Junior Poster · Answer 6 · 2010-05-26T10:58:49+00:00

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

rajarajan2017 · Answer 7 · 2010-05-26T11:51:28+00:00

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>

InsaneVr6 0 Light Poster · Answer 8 · 2010-05-27T00:46:16+00:00

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.

drewpark88 35 Junior Poster · Answer 9 · 2010-05-27T01:04:54+00:00

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.

drewpark88 35 Junior Poster · Answer 10 · 2010-05-27T01:09:41+00:00

drewpark88 35 Junior Poster

14 Years Ago

Updated it, it should work now : )

InsaneVr6 0 Light Poster · Answer 11 · 2010-05-28T02:52:23+00:00

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

InsaneVr6 0 Light Poster · Answer 12 · 2010-05-30T11:15:47+00:00

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.