Solved

Play sound when a link is clicked

Posted on 2007-11-26
7
1,006 Views
Last Modified: 2013-12-07
EE,
I am trying to find code for JavaScript that will play a sound (.wav file) when a link is clicked. I do not want the sound to play when the page loads and I am only going to associate it with a single link on a page.

I would like it to play in IE and FireFox, but if I can get it work only in IE that would fine.

Any help would be greatly appreciated.

dresdena1
0
Comment
Question by:dresdena1
7 Comments
 
LVL 15

Expert Comment

by:spprivate
ID: 20351795
Just create a link to this wav file like any other hyperlink.Rest will be taken care by the browser.
<A HREF = "mymusic.wav" >Listen Sound </A>
Thats it
0
 

Author Comment

by:dresdena1
ID: 20351829
spprivate,
Thanks for the quick response.
I will already be using the link to go to another page.

dresdena1
0
 
LVL 12

Expert Comment

by:Sinoj Sebastian
ID: 20351879
Try this
------------------------------------
function DHTMLSound(surl) {
  document.getElementById("dummyspan").innerHTML=
    "<embed src='"+surl+"' hidden=true autostart=true loop=false>";
}

<span id='dummyspan'></span>
<form>
<img src="play.gif" onClick="DHTMLSound('success.wav')">
</form>
---------------------------------------
This should work in IE and FF
0
Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

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.

 

Author Comment

by:dresdena1
ID: 20352064
sinoj,
I am trying to get this to work on a horizontal line of text links. I believe that the form tag is causing a line break.
To try to get sound to play, I enclosed the <a href in the form tags and replaced the img src with a href and then put the DHTMLSound with the sound file that I am interested in playing.
It didn't work.

Do I need to enclose the function in <script>  tags?
It showed through the browser so I enclosed in <script> tags to hide it and I also tried putting it in the <HEAD> section.

I am still unable to get any sound.

Here is my last try:
<<
<script>
function DHTMLSound(surl') {
  document.getElementById("dummyspan").innerHTML=
    "<embed src='"+surl'+"' hidden=true autostart=true loop=false>";
}
</script>

<span id='dummyspan'></span>
<form>
<a href="race_schedule.html" onClick="DHTMLSound('cowbell.wav')">Races</a>&nbsp;&nbsp;&nbsp;
</form>
>>

Any ideas?
Thanks very much
 dresdena1
0
 
LVL 12

Accepted Solution

by:
Sinoj Sebastian earned 125 total points
ID: 20352344
Ok here you go........
------------------------------------------------------------------------
<!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>
      <script type="text/javascript">
            function DHTMLSound(surl) {
              document.getElementById("dummyspan").innerHTML= "<embed src='"+surl+"' hidden=true autostart=true  loop=false>";
            }
            function delayedRedirect(){
                  document.getElementById("dummyspan").innerHTML = ""
                      window.location = "http://www.google.com"
            }
      </script>
</head>
<body >
      <span id=dummyspan></span>
      <A HREF = "#" onclick="DHTMLSound('http://www.phon.ucl.ac.uk/home/mark/audio/success.wav');  setTimeout('delayedRedirect()', 1000); return false;">Play Sound and Redirect</A>


</body>
</html>
------------------------------------------------------------------------
You may change the time out interval, depending up on the length of the sound track.
0
 
LVL 28

Expert Comment

by:Pravin Asar
ID: 20353348
0
 

Author Closing Comment

by:dresdena1
ID: 31411031
sinoj,
Perfect! Thanks very much!

dresdena1
0

Featured Post

Free Tool: Postgres Monitoring System

A PHP and Perl based system to collect and display usage statistics from PostgreSQL databases.

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.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Introduction If you're like most people, you have occasionally made a typographical error when you're entering information into an online form.  And to your consternation, the browser remembers the error, and offers to autocomplete your future entr…
JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
Google currently has a new report that is in beta and coming soon to Webmaster Tool accounts. This Micro Tutorial will highlight new features for Google Webmaster Tools.
How to create a custom search shortcut to site-search Experts Exchange using Google in the Firefox browser. This eliminates the need to type out site:experts-exchange.com whenever you want to search the site. Launch your Bookmark Menu: Press 'Ctrl +…

828 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question