Javascript 单击图像时播放声音文件
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10083788/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Play sound file when image is clicked
提问by Prajoth
I am not a native HTMLprogrammer, so please don't jump all over me about this simple question.
我不是本地HTML程序员，所以请不要在这个简单的问题上跳过我。
I have an image that, I am displaying using the following code:
我有一个图像，我使用以下代码显示：
<img name="track1" src="images/track1.png" width="180" height="180" border="0" id="track1" alt="" />
I want a sound file to be played when that image is clicked. I can make the image a button, but that is messing up the layout of the page for some reason.
我希望在单击该图像时播放声音文件。我可以将图像设为按钮，但由于某种原因，这会弄乱页面的布局。
I am okay with using any player, but the only thing is that I do not want to display an intrusive player. I just want the user to press the image and hear the music. If he presses another image, the current music needs to stop playing, and a different sound must be played.
我可以使用任何播放器，但唯一的问题是我不想显示侵入性播放器。我只希望用户按下图像并听到音乐。如果他按下另一个图像，则需要停止播放当前音乐，必须播放不同的声音。
Please help! Thanks!
请帮忙！谢谢！
采纳答案by blasteralfred Ψ
First you have to use jQuery.
You may create some <div>in your page having some id, for example;
首先你必须使用jQuery。例如，您可以<div>在页面中创建一些具有某些 id 的内容；
<div id="wrap"> </div>.
<div id="wrap"> </div>.
Then, in your JavaScript, when you want to play the file, just add
然后，在你的 JavaScript 中，当你想播放文件时，只需添加
$('#wrap').append('<embed id="embed_player" src="audio.wav" autostart="true" hidden="true"></embed>');
the whole code looks something like;
整个代码看起来像；
<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>
Hope this helps.
希望这可以帮助。
回答by Mark Gavagan
This answerby @klaustopherhelped me. He wrote:
@ klaustopher 的这个回答帮助了我。他写了：
HTML5 has the new -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>
HTML5 具有可用于播放声音的新 -Tag。它甚至有一个非常简单的 JavaScript 接口：
<audio id="sound1" src="yoursound.mp3" preload="auto"></audio> <button onclick="document.getElementById('sound1').play();">Play it</button>
Here's how I implemented his advice so that clicking on the Font Awesome icon "fa-volume-up" (located on the Web page after "mule.") results in "donkey2.mp3" sound playing (note: mp3 doesn't play in all browsers):
这是我如何实施他的建议，以便单击 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>
回答by Suresh Pattu
<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>
