当图片被点击时播放声音文件

问题描述：

我不是原生HTML程序员，所以请不要跳过我这个简单的问题。当图片被点击时播放声音文件

我有，我用下面的代码显示图像：

<img name="track1" src="images/track1.png" width="180" height="180" border="0" id="track1" alt="" />

我想在单击图像时要播放的声音文件。我可以使图像成为一个按钮，但由于某种原因，这会让页面的布局变得糟糕。

我可以使用任何球员，但唯一的是我不想显示一个侵入球员。我只想让用户按下图像并听到音乐。如果他按下另一张图像，则当前音乐需要停止播放，并且必须播放不同的声音。

请帮忙！谢谢！

您可以使用[HTML5音频标签（http://www.w3schools.com/html5/tag_audio.asp）和使用JavaScript启动它后点击 – Neysor 2012-04-10 06:11:03

可能的重复：http://stackoverflow.com/questions/8489710/how-can-i-play-sound-in-jquery-when-click-a-button – Victor 2012-04-10 06:12:08

答

首先你必须使用jQuery。例如，你可以在你的页面中创建一些<div>，

<div id="wrap"> </div>。

然后，在你的JavaScript，当你要播放的文件，只需添加

$('#wrap').append('<embed id="embed_player" src="audio.wav" autostart="true" hidden="true"></embed>');

整个代码看起来是这样;

<script type="text/javascript" src="jquery-1.7.1.js"></script> 
<script type="text/javascript"> 
$(document).ready(function() { 
$('#track1').click(function(){ 
    $('#wrap').append('<embed id="embed_player" src="audio.wav" autostart="true" hidden="true"></embed>'); 
}); 
}); 
</script> 
<img name="track1" src="images/track1.png" width="180" height="180" border="0" id="track1" alt="" /> 
<div id="wrap">&nbsp;</div>

希望这会有所帮助。

我喜欢这个解决方案离子，但是JavaScript标签描述说“除非另外包含框架/库的另一个标签，否则预计会有纯JavaScript的答案。”也许这对于纯JavaScript的答案是一个很好的补充。 – setholopolus 2017-11-28 03:44:55

答

<html>  
    <body> 
     <div id="container"> 
      <img name="track1" src="images/track1.png" width="180" height="180" border="0" id="track1" alt="" class="play" /> 
     </div> 
    </body> 
</html>

<script> 
     $(document).ready(function() { 
      var audioElement = document.createElement('audio'); 
      audioElement.setAttribute('src', 'audio.mp3'); 
      audioElement.setAttribute('autoplay', 'autoplay'); 
      //audioElement.load() 

      $.get(); 

      audioElement.addEventListener("load", function() { 
       audioElement.play(); 
      }, true); 

      $('.play').click(function() { 
       audioElement.play(); 
      }); 

      $('.pause').click(function() { 
       audioElement.pause(); 
      }); 
     }); 
    </script>

答

此答案由https://stackoverflow.com/a/7620930/1459653 @klaustopher（https://stackoverflow.com/users/767272/klaustopher）帮助了我。他写道：

HTML5 has the new <audio>-Tag that can be used to play sound. It even has a pretty simple JavaScript Interface: 

`<audio id="sound1" src="yoursound.mp3" preload="auto"></audio> 
    <button onclick="document.getElementById('sound1').play();">Play 
    it</button>`

这里是我是如何实现自己的意见，使点击字体真棒图标“FA-音量增加”导致“donkey2.mp3”（后位于Web页上的“骡子”。）播放声音（注：MP3并不适用于所有的浏览器玩）：

<p>In short, you're treated like a whole person, instead of a rented mule. <audio id="sound1" src="assets/donkey2.mp3" preload="auto"></audio><a class="icon fa-volume-up" onclick="document.getElementById('sound1').play();"></a>

当图片被点击时播放声音文件

相关推荐