play sound when a link is clicked

Question

InsaneVr6 0 Light Poster

13 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 13 Years Ago Latest Post by InsaneVr6

All 17 Replies

drewpark88 35 Junior Poster

13 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 13 Years Ago by drewpark88 because: n/a

drewpark88 35 Junior Poster

13 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

13 Years Ago

Hopefully this worked for you, let me know : )

drewpark88 35 Junior Poster

13 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 13 Years Ago by drewpark88 because: n/a

drewpark88 35 Junior Poster

13 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

13 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

13 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.

play sound when a link is clicked

Recommended Answers Collapse Answers

All 17 Replies

Recommended Answers