单击图像时播放声音文件
单击图像时播放声音文件
提问于 2012-04-10 13:56:56
我不是一个原生的HTML程序员，所以请不要在这个简单的问题上对我指手画脚。
我有一个图像，我正在使用以下代码显示它：
<img name="track1" src="images/track1.png" width="180" height="180" border="0" id="track1" alt="" />我希望在单击该图像时播放声音文件。我可以让图像变成一个按钮，但由于某种原因，这会打乱页面的布局。
我可以使用任何播放器，但唯一的问题是我不想显示一个侵入性的播放器。我只想让用户按下图像并听到音乐。如果他按下另一个图像，当前音乐需要停止播放，必须播放不同的声音。
请帮帮我！谢谢!
回答 3
Stack Overflow用户
回答已采纳
发布于 2012-04-10 15:10:51
首先，你必须使用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>希望这能有所帮助。
Stack Overflow用户
发布于 2015-09-27 02:24:07
@klaustopher的This answer帮助了我。他写道：
HTML5有新的-Tag，可以用来播放声音。它甚至有一个非常简单的JavaScript接口：
播放它
以下是我如何实现他的建议，以便单击Font Awesome图标"fa-volume-up“(位于Web页面上”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>Stack Overflow用户
发布于 2013-11-05 12:44:38
<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>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/10083788
复制相关文章
相似问题
腾讯云开发者
