我不是本地HTML
程序员,所以请不要因为这个简单的问题而跳过我。
我有一张图片,我正在使用以下代码显示:
<img name="track1" src="images/track1.png" width="180" height="180" border="0" id="track1" alt="" />
我希望在单击该图像时播放声音文件。我可以将图像设为按钮,但由于某种原因,这会弄乱页面的布局。
我可以使用任何播放器,但唯一的问题是我不想展示一个侵入式播放器。我只是希望用户按下图像并听到音乐。如果他按下另一张图像,则当前音乐需要停止播放,并且必须播放不同的声音。
请帮忙!谢谢!
答案 0 :(得分:5)
首先你必须使用jQuery。
例如,您可以在页面中创建一些具有某个ID的<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"> </div>
希望这有帮助。
答案 1 :(得分:5)
@klaustopher(https://stackoverflow.com/a/7620930/1459653)的回答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>`
这是我如何实施他的建议,以便点击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>
答案 2 :(得分:0)
<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>