在點擊HTML中的圖像時添加聲音5

Question

我在我的html頁面上有一個圖像，我希望它在點擊它時發揮出聲音效果。 這裏的形象代碼：

<img src="images/button1.png" width="32" height="32" onclick="alert();"> 

我想改變警告框入的聲音效果，我加載我該怎麼做呢？

Answer 1

使用SoundManager，將免除很多頭痛。如果音頻不是由瀏覽器本地支持的，它甚至會更好地閃回閃光。

但是，如果您不想在第三方庫上進行中繼，還有另一種解決方案，在支持音頻標籤的每個瀏覽器中都有點令人生畏和疲憊，但功能卻很強大。 您需要做的第一件事就是使用源內容填充音頻標籤。因爲沒有關於我們需要包括每個支持那些支持的音頻格式，不同的瀏覽器廠商之間的共同協議

<audio id = 'audio'> 
    <source src="test.mp3" type="audio/mpeg" /> 
    <source src="test.ogg" type="audio/ogg" /> 

    <object class="playerpreview" type="application/x-shockwave-flash" 
      data="player_mp3_mini.swf" width="200" height="20"> 
    <param name="movie" value="player_mp3_mini.swf" /> 
    <param name="bgcolor" value="#085c68" /> 
    <param name="FlashVars" value="mp3=test.mp3" /> 
    <embed href="player_mp3_mini.swf" bgcolor="#085c68" width="200" 
      height="20" name="movie" align="" 
      type="application/x-shockwave-flash" flashvars="mp3=test.mp3"> 
    </embed> 
    </object> 

</audio> 

：你可以用下面的代碼行做到這一點。如果一個瀏覽器不支持它，那麼將跳過它並回退到下一個。如果它們都不被支持，那麼你可以使用閃存作爲後備。 Google AJAX Libraries API將促進我們的工作。下面是完整的源代碼：

<script src="http://www.google.com/jsapi"></script> 
<script>google.load("swfobject", "2.2");</script> 
<img src="http://www.kafkabrigade.org.uk/wp-content/uploads/2011/07/button-pic.jpg" onclick="playSound();"> 

<div id="fallback"></div> 
<audio id = 'audio'> 
     <source src="http://www.hellopixel.net/click.mp3" type="audio/mpeg" /> 
     <source src="http://www.hellopixel.net/click.ogg" type="audio/ogg" /> 

     <object class="playerpreview" type="application/x-shockwave-flash" 
       data="player_mp3_mini.swf" width="200" height="20"> 
     <param name="movie" value="player_mp3_mini.swf" /> 
     <param name="bgcolor" value="#085c68" /> 
     <param name="FlashVars" value="mp3=test.mp3" /> 
     <embed href="player_mp3_mini.swf" bgcolor="#085c68" width="200" 
       height="20" name="movie" align="" 
       type="application/x-shockwave-flash" flashvars="mp3=test.mp3"> 
     </embed> 
     </object> 

    </audio> 


<script> 
    function playSound() { 
     if (document.getElementById('audio').canPlayType) { 
      if (!document.getElementById('audio').canPlayType('audio/mpeg')) { 
       document.getElementById('audio').style.display = 'none'; 
       swfobject.embedSWF(
       "player_mp3_mini.swf", 
       "fallback", 
       "200", 
       "20", 
       "9.0.0", 
       "", 
       {"mp3":"http://www.hellopixel.net/click.mp3"}, 
       {"bgcolor":"#085c68"});     
      } else { 
       document.getElementById('audio').play(); 
       document.getElementById('fallback').style.display = 'none'; 
      } 
     } 

    } 
</script>​ 

小提琴：http://jsfiddle.net/SMR4V/

注：我還沒有創建的OGG文件，因此Firefox，不會工作，因爲FF使用OGG文件。

Answer 2

好吧，這不是那麼容易，實際上很難用HTML來完成。有關更多詳細信息，請參閱here。

您`ll臉像各種各樣的問題：

• 不同的瀏覽器有不同的音頻格式的支持。
• 如果瀏覽器 不支持該文件格式，則不會在沒有 插件的情況下播放音頻。
• 如果插件未安裝在用戶的計算機上，則 音頻將無法播放。
• 如果您將該文件轉換爲其他格式，則 仍然無法在所有瀏覽器中播放。

使用超鏈接

如果網頁包含超鏈接的媒體文件，大多數瀏覽器將使用一個「助手程序」來播放該文件。

以下代碼片段顯示了一個指向mp3文件的鏈接。如果用戶點擊該鏈接時，瀏覽器將啓動一個輔助應用程序來播放該文件：

<a href="horse.mp3">Play the sound</a> 

通過我認爲最好的解決方法是使用一個Flash播放聲音，即讓你的鏈接，Flash對象/按鈕/文本，並在懸停/點擊/等的Adobe Flash內爲其分配聲音。