使用JavaScript在mouseover上播放声音

Question

伙计们，我试图在鼠标悬停在按钮上时播放声音。我尝试阅读谷底的例子，但它似乎并没有工作。这是我现在的代码：

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

正如你所看到的，将鼠标悬停在第一幅图片 - Facebook的链接应该引起我的声音..但事实并非如此。这是我的链接http://work.juanalvarezdj.com你能帮忙吗？我究竟做错了什么？

Answer 1

Firefox目前不支持您想要的AUDIO标签。来自MDN：

注：目前，Gecko仅支持Ogg容器中的Vorbis以及WAV格式。此外，服务器必须使用正确的MIME类型来提供文件，以便Gecko正确播放它。

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

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

，使其在Firefox浏览器，你可以发现Firefox和切换文件类型的OGG或者WAV文件格式，它会奏效。我建议看一下音频库。

http://www.jplayer.org/

Answer 2

您是否已经使用萤火虫检查脚本执行了？

只是一个猜测，但你的处理函数说：

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

也许变量“faceb”在这方面不存在，你应该dcument.getElmentById抢元素的例子。 如果这应该是这种情况，当然会引发异常并且不执行第二个命令（mysound.play（））。

Answer 3

我相信问题是，你的源文件是MP3文件，你不能在Firefox中直接播放：

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

Answer 4

Firefox不支持MP3文件。你应该使用ogg格式。 Why doesn't Firefox support the MP3 file format in <audio>

Answer 5

我在http://geneinhell.tripod.com/webonmediacontents/geneinhell.html找到了一个例子。

将鼠标指针放在图像上时，会播放一个mp3文件。

只需在页面上单击右键并选择“查看源代码”，即可查看用于实现该代码的代码。