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

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

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

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

Answer 3

你已经用 firebug 检查过脚本执行了吗？

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

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

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

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 文件。

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