html - Play sound on mouseover with JavaScript - Stack Overflow

admin管理员组

文章数量:1290166

guys, I'm trying to play a sound when hovering over a button. I've tried reading trough examples but it doesn't seem to work. This is my code now:

<audio id="mySoundClip">
  <source src="/sound/c_but.mp3" type="audio/mp3" />
 </audio>
<script type="text/javascript">
    var mysound = document.getElementById("mySoundClip");
</script>
<div class="whole">
<div id="social">
    <a href="#"><img name="faceb" src="img/social/up_fb.png" width="40" onMouseOver="faceb.src='img/social/o_fb.png'; mysound.play();" onMouseOut="faceb.src='img/social/up_fb.png'" class="soc"/></a>
    <a href="#"><img name="goobu" src="img/social/up_gb.png" width="40" onMouseOver="goobu.src='img/social/o_gb.png'" onMouseOut="goobu.src='img/social/up_gb.png'" class="soc"/></a>
    <a href="#"><img name="myspa" src="img/social/up_ms.png" width="40" onMouseOver="myspa.src='img/social/o_ms.png'" onMouseOut="myspa.src='img/social/up_ms.png'" class="soc"/></a>
    <a href="#"><img name="twitt" src="img/social/up_tw.png" width="40" onMouseOver="twitt.src='img/social/o_tw.png'" onMouseOut="twitt.src='img/social/up_tw.png'" class="soc"/></a>
</div>
</div>

As you can see, hovering over the first image - the facebook link should trigger my sound.. but it doesn't. Here is my link Can you help, please? What am I doing wrong?

guys, I'm trying to play a sound when hovering over a button. I've tried reading trough examples but it doesn't seem to work. This is my code now:

<audio id="mySoundClip">
  <source src="/sound/c_but.mp3" type="audio/mp3" />
 </audio>
<script type="text/javascript">
    var mysound = document.getElementById("mySoundClip");
</script>
<div class="whole">
<div id="social">
    <a href="#"><img name="faceb" src="img/social/up_fb.png" width="40" onMouseOver="faceb.src='img/social/o_fb.png'; mysound.play();" onMouseOut="faceb.src='img/social/up_fb.png'" class="soc"/></a>
    <a href="#"><img name="goobu" src="img/social/up_gb.png" width="40" onMouseOver="goobu.src='img/social/o_gb.png'" onMouseOut="goobu.src='img/social/up_gb.png'" class="soc"/></a>
    <a href="#"><img name="myspa" src="img/social/up_ms.png" width="40" onMouseOver="myspa.src='img/social/o_ms.png'" onMouseOut="myspa.src='img/social/up_ms.png'" class="soc"/></a>
    <a href="#"><img name="twitt" src="img/social/up_tw.png" width="40" onMouseOver="twitt.src='img/social/o_tw.png'" onMouseOut="twitt.src='img/social/up_tw.png'" class="soc"/></a>
</div>
</div>

As you can see, hovering over the first image - the facebook link should trigger my sound.. but it doesn't. Here is my link http://work.juanalvarezdj. Can you help, please? What am I doing wrong?

• javascript
• html

Share Improve this question Follow asked Sep 4, 2011 at 12:35 DreamWaveDreamWave 1,94033 gold badges2828 silver badges6363 bronze badges 1

• This question is closely related: stackoverflow./questions/3013883/play-audio-file-on-hover – Anderson Green Commented Feb 22, 2013 at 19:00

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 3

Firefox does not currently support the AUDIO tag the way you want. From MDN:

Note: Currently, Gecko supports only Vorbis, in Ogg containers, as well as WAV format. Also, the server must serve the file using the correct MIME type in order for Gecko to play it correctly.

https://developer.mozilla/en/HTML/Element/audio

http://html5doctor./native-audio-in-the-browser/

To make it work in Firefox, you could detect Firefox and switch the file type to an Ogg or WAV file format, which will work. I would suggest taking a look at an audio library as well.

http://www.jplayer/

I believe the problem is that your source file is an MP3 file, which you can't play directly in Firefox:

http://support.mozilla./en-US/questions/758978

Have you checked the script execution with firebug already?

Just a guess, but your handler function says:

faceb.src='img/social/o_fb.png';

Maybe the variable "faceb" does not exist in that context and you should grab that element by dcument.getElmentById for example. If this should be the case, of course an exception is thrown and the second mand (mysound.play()) is not executed.

Firefox doesn't support mp3 files. You should use ogg format instead. Why doesn't Firefox support the MP3 file format in <audio>

I found an example at http://geneinhell.tripod./webonmediacontents/geneinhell.html.

When you place your mouse pointer over the image, an mp3 file gets played.

Just right-click on page and select 'view source' to see the coding used to make it possible.

本文标签： htmlPlay sound on mouseover with JavaScriptStack Overflow