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

只需在頁面上單擊右鍵並選擇「查看源代碼」，即可查看用於實現該代碼的代碼。