我不是本地的HTML 程序员，所以请不要因为这个简单的问题而跳来跳去。
我有一张图片，我正在使用以下代码显示：
<img name="track1" src="images/track1.png" width="180" height="180" border="0" id="track1" alt="" />
我希望在单击该图像时播放声音文件。我可以将图像设置为按钮，但由于某种原因，这会弄乱页面的布局。
我可以使用任何播放器，但唯一的问题是我不想显示侵入式播放器。我只希望用户按下图像并听到音乐。如果他按下另一个图像，当前的音乐需要停止播放，并且必须播放不同的声音。
请帮忙！谢谢！
【问题讨论】：
标签： javascript html playback background-music
首先你必须使用jQuery。
例如，您可以在具有某些 id 的页面中创建一些 <div>；
<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"> </div>
希望这会有所帮助。
【讨论】：
This answer @klaustopher 帮助了我。他写道：
HTML5 有新的 -Tag 可以用来播放声音。它甚至还有一个非常简单的 JavaScript 接口：
<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></p>
【讨论】：
<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>
【讨论】：