Solved

using javascript to play sound onMouseOver

Posted on 2003-11-10
26
640 Views
Last Modified: 2012-08-13
I am trying to do something on a fun website that I have.  I have some images that are links and I am trying to make it so that when you MouseOver the link it plays a sound bite and then when you Click on the link it brings you to the appropriate place.  
I believe that I want to embed these sound bites because I do not want anything to show up on the website visually.  I just want it ot play the sound onMouseOver.  Thansk for any help you can give me.
0
Comment
Question by:makspo
  • 9
  • 9
  • 7
  • +1
26 Comments
 
LVL 10

Expert Comment

by:Nushi
ID: 9715159
hi there.
simply add embeded tag to your html.
whne the user moves with the mouse on the <a> tag start play the wav file.

i will post a sample code in few minutes.

Nushi.
0
 

Author Comment

by:makspo
ID: 9715161
Just a little additional information.  There are a couple of links that I am going to have play different sounds.  So if I need to use the embed command there needs to be a way that I can tell it which sound bite to play for which image MouseOver.  Thanks again
0
 
LVL 10

Expert Comment

by:Nushi
ID: 9715172
i think you are looking for this:

http://developer.irt.org/script/191.htm

Nushi.
0
 

Author Comment

by:makspo
ID: 9715199
i looked at that page and it seems to be on the idea of what I am trying to do.  my question would be that how do I embed more than one sound and have different links know which sound they are referring to?

<html>
<body>

<script language="JavaScript"><!--
function playSound() { if (navigator.mimeTypes["audio/x-wav"].enabledPlugin.name == "LiveAudio") document.firstSound.play(false); }
function pauseSound() { document.firstSound.pause(); }
function stopSound() { document.firstSound.stop(); }
//--></script>

<a href="javascript:playSound()">Play the sound now!</a><br>
<a href="javascript:pauseSound()">Pause/Restart the sound</a><br>
<a href="javascript:stopSound()">Stop the sound</a><br>

<embed src="sound.wav" hidden=true autostart=false loop=false name="firstSound" MASTERSOUND>

</body>
</html>
0
 
LVL 10

Expert Comment

by:NetGroove
ID: 9715235
How about this:


    <OBJECT ID=myID TYPE="audio/x-wav" WIDTH=0 HEIGHT=0>
    <PARAM NAME="AUTOSTART" VALUE="false">
    <PARAM NAME="src" VALUE="sound/laugh.wav">

    your browser couldn't load the audio file

   </OBJECT>


   <A onmouseover="document.myID.play()" onmouseout="document.myID.stop()">Play</A>


0
 
LVL 10

Expert Comment

by:Nushi
ID: 9715241
simply use an id to the a and manipulate the click on it.

<script language="JavaScript"><!--
function playSound() { if (navigator.mimeTypes["audio/x-wav"].enabledPlugin.name == "LiveAudio") document.firstSound.play(false); }
function pauseSound() { document.firstSound.pause(); }
function stopSound() { document.firstSound.stop(); }
//--></script>


This is the id of the first sound:
firstSound

Simply copy this several times with diffrent id.

Nushi.
0
 

Author Comment

by:makspo
ID: 9715322
NetGroove

I did this and it works.  Is there a way that I can store all the OBJECT parameters in a function except for the actual sound file name and pass that up with the link.  Becuase it seems the way done above that I would have to include:

<OBJECT ID=myID TYPE="audio/x-wav" WIDTH=0 HEIGHT=0>
    <PARAM NAME="AUTOSTART" VALUE="false">
    <PARAM NAME="src" VALUE="sound/laugh.wav">

    your browser couldn't load the audio file

   </OBJECT>

for every soundclip that I had on my site.  I do appreciate the help so far that you have given me.
0
 
LVL 16

Expert Comment

by:jaysolomon
ID: 9715332
0
 
LVL 10

Expert Comment

by:Nushi
ID: 9715365
write a serverside function that does it for you.
simply creata array with names of the files and the rest is identical with all the fucntions.

<script>
function getSound( fileName ){
var reply='';
reply += "<OBJECT ID=myID TYPE='audio/x-wav' WIDTH=0 HEIGHT=0>";
reply += "<PARAM NAME='AUTOSTART' VALUE='false'>";
reply += "<PARAM NAME='src' VALUE='" + fileName + "'>"
reply += "your browser couldn't load the audio file";
reply += "</OBJECT>";

//add the code here to add this to your page
// location.innerHTML += reply
}

var files = new Array();
files [ file.length] = 'file1.wav';
files [ file.length] = 'file2.wav';
...
files [ file.length] = 'filen.wav';

the rest is to call this function:
getSound( files[index]);

Nushi.
0
 

Author Comment

by:makspo
ID: 9715377
jaysolomon

that seems to be for a single sound clip.  would i have to change that function to receive a variable and set the source as a variable that I pass up to it.  would that work?
0
 
LVL 10

Expert Comment

by:Nushi
ID: 9715518
makspo.

thats exactly what i wrote for you.

Nushi.
0
 

Author Comment

by:makspo
ID: 9715541
Nushi

thank you very much.  i am going to run to a meeting and i will give it a shot when i get out.  thanks for the help.

makspo
0
 
LVL 10

Expert Comment

by:Nushi
ID: 9715549
Np.

im here if you still have open questions.
Nushi.
0
What Is Threat Intelligence?

Threat intelligence is often discussed, but rarely understood. Starting with a precise definition, along with clear business goals, is essential.

 
LVL 10

Expert Comment

by:NetGroove
ID: 9715650
Here also my proposal for testing:


<html>
<head>
<script>
function play(theWave){
  document.myID.FileName = theWave;
  document.myID.play()
}
</script>
</head>
<body>
<OBJECT ID=myID TYPE="audio/x-wav" WIDTH=0 HEIGHT=0>
    <PARAM NAME="AUTOSTART" VALUE="false">
    your browser couldn't load the audio file

   </OBJECT>


   <A onmouseover="play('start.wav')" onmouseout="document.myID.stop()">Play</A>
   <A onmouseover="play('ringin.wav')" onmouseout="document.myID.stop()">Play</A>
   <A onmouseover="play('ringout.wav')" onmouseout="document.myID.stop()">Play</A>
   <A onmouseover="play('tada.wav')" onmouseout="document.myID.stop()">Play</A>

</body>
</html>



0
 
LVL 10

Accepted Solution

by:
NetGroove earned 50 total points
ID: 9715733
And it can be anything with onMouse events:

<html>
<head>
<script>
function play(theWave){
  document.myID.FileName = theWave;
  document.myID.play()
}
</script>
</head>
<body>
<OBJECT ID=myID TYPE="audio/x-wav" WIDTH=0 HEIGHT=0>
    <PARAM NAME="AUTOSTART" VALUE="false">
    your browser couldn't load the audio file

   </OBJECT>


   <p onmouseover="play('start.wav')" onmouseout="document.myID.stop()">Start</p>
   <p onmouseover="play('ringin.wav')" onmouseout="document.myID.stop()">Ring</p>
   <p onmouseover="play('ringout.wav')" onmouseout="document.myID.stop()">Out</p>
   <p onmouseover="play('tada.wav')" onmouseout="document.myID.stop()">Tadaa</p>

</body>
</html>

0
 

Author Comment

by:makspo
ID: 9716480
Netgroove and Nushi

you both have been extremely helpful.  between the two of you all my questions are answered.  I am going to split the points between the two of you if I can figure out how to do that.  Thanks again.  
0
 
LVL 10

Expert Comment

by:NetGroove
ID: 9716558
Splitting fifty points is not a big thing.
Better give them all to Nushi (and next time to me :)

0
 
LVL 10

Expert Comment

by:Nushi
ID: 9716577
you have to accept answer as assist answer.
accept the 2 comments from both of us and that will split the points between us.

Thank you netGroove for your kindness.
ill remember it :-)).
but it should be splitted between us.

Nushi.
0
 
LVL 10

Expert Comment

by:NetGroove
ID: 9716593
You do not know me, I was hopping next time more then fifty points :)
0
 
LVL 10

Expert Comment

by:Nushi
ID: 9716601
>>I was hopping next time more then fifty points

i watching you for the past month since you came here.
you are GOOD.

Nushi.
0
 
LVL 10

Expert Comment

by:NetGroove
ID: 9716610
thanks.
0
 

Author Comment

by:makspo
ID: 9716848
I was going to split the points amongst the two of you.  Sorry if this should have been worth more than 50 points.  I never know how to judge.  I accepted NetGroove and now I am trying to go back to accept Nushi to split and there is no option to accept another answer.  How do I split.
0
 
LVL 10

Expert Comment

by:Nushi
ID: 9716856
makspo if you still wish to give me some points (you dont have to )
simply open a question and place refferer to this question.

Nushi.
0
 

Author Comment

by:makspo
ID: 9716872
I would like to give you some points.  you were extremely helpful for me.  do you mean open a brand you question?  what do you mean place referrer?
0
 

Author Comment

by:makspo
ID: 9716991
NetGroove

I read through your code and it looked like exactly what I was looking for but I just tried to run it and I get a javascript error on this line every time:

document.myID.play()

this is the last line of the function.  I am not sure if since i already accepted your answer if you are even looking at this thread anymore.  if you happen to notice this question and could give me a little insight I would greatly appreciate it.  
0
 
LVL 10

Expert Comment

by:NetGroove
ID: 9718266
Even when no wave files are found does the error not appear in IE6.0

Which browser are you testing?

0

Featured Post

Highfive + Dolby Voice = No More Audio Complaints!

Poor audio quality is one of the top reasons people don’t use video conferencing. Get the crispest, clearest audio powered by Dolby Voice in every meeting. Highfive and Dolby Voice deliver the best video conferencing and audio experience for every meeting and every room.

Join & Write a Comment

Introduction HTML checkboxes provide the perfect way for a web developer to receive client input when the client's options might be none, one or many.  But the PHP code for processing the checkboxes can be confusing at first.  What if a checkbox is…
Having worked on larger scale sites, we found out that you are bound to look at more scalable solutions to integrating widgets, code snippets or complete applications and mesh them into functional sites, in any given composition. To share some of…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

705 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

Need Help in Real-Time?

Connect with top rated Experts

19 Experts available now in Live!

Get 1:1 Help Now