javascript - 单击图像时播放声音文件

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>

希望这对您有所帮助。