CODEWITHSUNDEEP
javascripthtml
DreamWave
DreamWave

Reputation: 1940

Play sound on mouseover with JavaScript

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.com Can you help, please? What am I doing wrong?

Upvotes: 2

Views: 7968

Answers (5)

Les
Les

Reputation: 11

I found an example at http://geneinhell.tripod.com/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.

Upvotes: 1

Jared Farrish
Jared Farrish

Reputation: 49198

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.org/en/HTML/Element/audio

http://html5doctor.com/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.org/

Upvotes: 3

Waltsu
Waltsu

Reputation: 612

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

Upvotes: 1

dnuttle
dnuttle

Reputation: 3830

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

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

Upvotes: 2

Dennis
Dennis

Reputation: 14465

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 command (mysound.play()) is not executed.

Upvotes: 1

Related Questions