在HTML 5单击图像添加声音 [英] Adding sound on clicking a image in HTML 5

问题描述

我有我的HTML页面上的形象，我希望它起到了良好的效果，当我点击它。
这里的图像code：

I have a image on my html page and i want it to play a sound effect when i click on it. Here's the image code:

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

我想改变警告框到声音效果，我加载我如何做呢？

I want to change the alert box into the sound effect that i load in. How do i do it?

推荐答案

使用 SoundManager类，并从许多烦恼的释放。更它将退回很好地闪烁，如果声音不被浏览器的原生支持。

Use SoundManager and will free up from a lot of headaches. Even more it will fallback nicely to flash if audio is not supported natively by browser.

然而，如果你不想在第三方库接力还有另一种解决方案，一点点的艰巨和排气功能，但在每个浏览器支持的音频标记。
你需要做的第一件事就是来填充源内容音频标签。你可以用code以下行做到这一点：

However if you don't want to relay on a third party library there is another solution, a little bit daunting and exhausting but functional in every browser supporting the audio tag. The first thing you need to do is to populate the audio tag with the source content. You can do this with the following lines of code:

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

由于没有对我们需要包括每个支持那些支持的音频格式不同的浏览器厂商之间的共同协议。如果一个浏览器不支持它，那么将跳过它，并退回到下一个。如果支持他们都不那么你可以使用闪存作为后备。 谷歌AJAX库API 将有利于我们的很多工作。下面是完整的源代码code：

Because there is not a common agreement between different browser vendors regarding the supported audio format we need to include each supported ones. If one browser does not support it, then will skip it and fallback to the next one. If none of them is supported then you can use flash as a fallback. Google AJAX Libraries API will facilitate much our work. Below is the full source code:

<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文件将无法正常工作

Note: I have not created the ogg file, so won't work in firefox, because FF is using ogg files.

这篇关于在HTML 5单击图像添加声音的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！