html - 在 HTML 5 中单击图像时添加声音

Question

我的 html 页面上有一张图片，我希望它在我点击它时播放声音效果。这是图像代码：

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

我想将警报框更改为我加载的声音效果。我该怎么做？

Answer 1

好吧，这并不容易，实际上仅使用 HTML 很难完成。有关更多详细信息，请参见此处。

您将面临各种问题，例如：

• 不同的浏览器有不同的音频格式支持。
• 如果浏览器不支持该文件格式，则没有插件将无法播放音频。
• 如果用户的计算机上没有安装该插件，音频将无法播放。
• 如果您将文件转换为其他格式，它仍然无法在所有浏览器中播放。

使用超链接

如果网页包含指向媒体文件的超链接，大多数浏览器将使用“帮助应用程序”来播放文件。

以下代码片段显示了指向 mp3 文件的链接。如果用户单击该链接，浏览器将启动一个帮助应用程序来播放该文件：

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

我认为最好的解决方案是使用 Flash 播放声音，即将链接作为 Flash 对象/按钮/文本，并在 Adob​​e Flash 中悬停/单击/等时为它们分配声音。

Answer 2

使用SoundManager将摆脱很多麻烦。更重要的是，如果浏览器本身不支持音频，它会很好地回退到 flash。

但是，如果您不想在第三方库上进行中继，还有另一种解决方案，虽然有点令人生畏和疲惫，但在每个支持音频标签的浏览器中都可以使用。您需要做的第一件事是使用源内容填充音频标签。您可以使用以下代码行执行此操作：

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

因为不同的浏览器供应商之间没有关于支持的音频格式的共同协议，所以我们需要包括每个支持的格式。如果一个浏览器不支持它，那么将跳过它并回退到下一个。如果它们都不支持，那么您可以使用 flash 作为后备。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 文件。