单击图像时播放 MP3答案

【问题标题】：Play MP3 with when an image is clicked单击图像时播放 MP3
【发布时间】：2013-04-04 00:37:21
【问题描述】：

当我单击我网站中的某个图像时，我想播放 MP3 文件。我还希望隐藏 MP3 文件。我怎样才能做到这一点？我尝试了这段代码，但没有任何反应：

<html>
<body>

<script language="javascript" type="text/javascript">
 function playSound(soundfile) {

document.getElementById("dummy").innerHTML=document.getElementById("dummy").innerHTML +
"<embed src=\""+mp3/a/bat.mp3+"\" hidden=\"true\" autostart=\"true\" loop=\"false\"     />";
 }

<span id="dummy" onclick="playSound('mp3/a/bat.mp3');"><img src="short_a/bat.jpg" 

name="Bottom-1" width="115" height="45" border="0" id="Bottom-1"/></a></span>

</script>
</body>
</html>

【问题讨论】：

您可以使用 iframe，将 iframe src 设置为点击自动播放 mp3 的页面，使用 CSS 或其他方式隐藏 iframe
This 正是你想要的，DEMO
ocanal- 你给我的那个是不是用不同的形式写的？
那是用音频对象编写的，这是播放声音的最有效方式。
我将如何做到这一点？我使用 php 作为我的语言？你能教我怎么做吗？

标签： onclick mp3 html5-audio

【解决方案1】：

这与PHP 无关，您只需将HTML 代码添加到您的PHP 页面即可。

如果你坚持嵌入标签，这里是你想要的代码，DEMO

<!DOCTYPE html>
<html>
  <head>
      <script type="text/javascript">
          function playSound(el,soundfile) {
              var embed = document.getElementById("embed");
              if (!embed) {
                  var embed = document.createElement("embed");
                      embed.id= "embed";
                      embed.setAttribute("src", soundfile);
                      embed.setAttribute("hidden", "true");
                  el.appendChild(embed);
              } else {
                  embed.parentNode.removeChild(embed);
              }
          }
      </script>
  </head>
<body>
    <span id="dummy" onclick="playSound(this, 'https://dl.dropbox.com/u/39640025/MP3/Waves.mp3');">
      <img src="short_a/bat.jpg" name="Bottom-1" width="115" height="45" border="0" id="Bottom-1"/>
    </span>
</body>
</html>

不过我还是建议你使用音频 API，DEMO

<!DOCTYPE html>
<html>
  <head>
      <script type="text/javascript">
          function playSound(el,soundfile) {
              if (el.mp3) {
                  if(el.mp3.paused) el.mp3.play();
                  else el.mp3.pause();
              } else {
                  el.mp3 = new Audio(soundfile);
                  el.mp3.play();
              }
          }
      </script>
  </head>
<body>
    <span id="dummy" onclick="playSound(this, 'https://dl.dropbox.com/u/39640025/MP3/Waves.mp3');">
      <img src="short_a/bat.jpg" name="Bottom-1" width="115" height="45" border="0" id="Bottom-1"/>
    </span>
</body>
</html>

【讨论】：

太棒了！真的帮助了我的角度指令。