使用JavaScript在鼠标悬停上播放声音

时间:2011-09-04 12:35:21

标签: javascript html

伙计们,我正试图在悬停在按钮上时播放声音。我试过通过示例阅读,但似乎没有用。这是我现在的代码:

<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你能帮忙吗?我做错了什么?

5 个答案:

答案 0 :(得分:3)

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/

答案 1 :(得分:2)

我认为问题是您的源文件是MP3文件,您无法直接在Firefox中播放:

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

答案 2 :(得分:1)

您是否已经使用firebug检查了脚本执行情况?

只是一个猜测,但你的处理函数说:

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

也许变量“faceb”在该上下文中不存在,您应该通过dcument.getElmentById获取该元素。 如果是这种情况,当然会抛出异常并且不执行第二个命令(mysound.play())。

答案 3 :(得分:1)

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

答案 4 :(得分:1)

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

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

只需右键单击页面并选择“查看源”即可查看用于实现此目的的编码。