2

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?

DreamWave
  • 1,934
  • 3
  • 28
  • 59

5 Answers5

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

Jared Farrish
  • 48,585
  • 17
  • 95
  • 104
  • 1
    I would use a library that supports Flash as a fallback. As that link discusses, jPlayer is an option. http://www.jplayer.org/ – Jared Farrish Sep 04 '11 at 12:53
  • 1
    Actually, another option could be to have two files, one MP3 and another in OGG for Firefox. See here: http://jfcoder.com/test/soundplay.html – Jared Farrish Sep 04 '11 at 12:57
2

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

dnuttle
  • 3,810
  • 2
  • 19
  • 19
1

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.

Les
  • 11
  • 1
  • The above-mentioned page works for me in Firefox(Mac), Safari(Mac), Opera(Mac), and Internet Explorer(Windows XP running on a virtual machine in my Mac). – Les Apr 23 '12 at 20:28
1

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.

Dennis
  • 14,210
  • 2
  • 34
  • 54
  • yes, forget about my first guess, of course that variable is defined by the name attribute. this is probably lacking html5 support? the audio element is new to html 5 and not a standard feature in every browser yet. Google Chrome works fine, just like bjornd says. – Dennis Sep 04 '11 at 12:47
  • as far as i'm concerned, there is no way to play sounds with javascript prior to html5-audio-feature. A workaround would be to implement this with flash. – Dennis Sep 04 '11 at 12:59
1

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

Community
  • 1
  • 1
Waltsu
  • 612
  • 6
  • 10