单击图像时播放声音文件

Question

我不是本地HTML程序员,所以请不要因为这个简单的问题而跳过我.

我有一个图像,我使用以下代码显示:

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

我希望在单击该图像时播放声音文件.我可以将图像设为按钮,但由于某种原因,这会弄乱页面的布局.

我可以使用任何播放器,但唯一的问题是我不想展示一个侵入式播放器.我只是希望用户按下图像并听到音乐.如果他按下另一张图像,则当前音乐需要停止播放,并且必须播放不同的声音.

请帮忙!谢谢!

Answer 1

首先,你必须使用jQuery.例如,您可以<div>在页面中创建一些具有某个ID的内容;

<div id="wrap">&nbsp;</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>

希望这可以帮助.

Answer 2

@klaustopher(/sf/users/53709071/)的回答/sf/answers/533465131/帮助了我.他写了:

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

这是我如何实现他的建议,以便点击Font Awesome图标"fa-volume-up"(位于"mule."之后的网页上)导致"donkey2.mp3"声音播放(注意: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>