在 html 中点击图像时播放声音
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/34696208/
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 a sound on image click in html
提问by Aaqiba
I am working on an alphabets kid learning website, and want to play a sound on clicking an image. e.g. if user clicks on A(image) then in background sound of pronunciation of A must be played. Can it possible without using java script? Could anyone help?
我正在开发一个字母儿童学习网站，想要在单击图像时播放声音。例如，如果用户单击 A（图像），则必须播放 A 发音的背景声音。可以不使用java脚本吗？有人可以帮忙吗？
回答by Balake
Without JavaScript? I don't think so but the JavaScript is very easy.
没有 JavaScript？我不这么认为，但 JavaScript 非常简单。
You can play an audio element that you have put in your page withdocument.getElementById('audioTag').play();So this should work:
您可以播放已放入页面的音频元素，document.getElementById('audioTag').play();因此这应该可以工作：
<a onclick="document.getElementById('yourAudioTag').play();">
<img src="yourSrc.jpg">
</a>
You might even be able to put the onclick method into your image tag itself like so:
您甚至可以将 onclick 方法放入您的图像标签本身，如下所示：
<img src="yourSrc.jpg" onclick="document.getElementById('yourAudioTag').play();">
You can then use the .pause()method to pause the audio and .load()if you would like to load some new audio. It works similar to the HTML5 video tag.
然后您可以使用该.pause()方法暂停音频，.load()如果您想加载一些新的音频。它的工作原理类似于 HTML5 视频标签。
And if you don't want to use an element for the audio you can declare it like this:
如果您不想为音频使用元素，您可以像这样声明它：
var audio = new Audio('audio_file.mp3'); audio.play();
and use it the same way. Just instead of
并以同样的方式使用它。只是代替
document.getElementById('yourAudioTag').play();
you would use
你会用
audio.play();
An example of the whole thing would look something like this:
整个事情的一个例子看起来像这样：
<a onclick="myAudioFunction('A');">
<img src="A.jpg">
</a>
<a onclick="myAudioFunction('B');">
<img src="B.jpg">
</a>
<script>
var aAudio = new Audio('a.mp3');
var bAudio = new Audio('b.mp3');
function myAudioFunction(letter) {
if(letter == 'a') {
aAudio.play();
} else if(letter == 'b') {
bAudio.play();
}
}
</script>
回答by remdevtec
Interesting question.
有趣的问题。
Obviously, you should go for a JavaScript solution(like this post). To quote css-tricks.com:
显然，您应该使用 JavaScript 解决方案（如这篇文章）。引用css-tricks.com：
Again unfortunately, we can't tell an
<audio>element what to do through CSS, so we'll need JavaScript.
再次不幸的是，我们无法
<audio>通过 CSS告诉元素该做什么，因此我们需要 JavaScript。
However you have set up quite a nice challenge.
然而，你已经设置了一个很好的挑战。
The <audio>element has the ability to show controls. In most browsers, the play button would come first from left in the controls.
Thus, if you wrap the appropriate <audio>element inside your letter element (<div>/<img>/ etc.), then, with a little absolute-positioning magic, and low opacityfor the <audio>, you could put your letter "over the sound". So, when users click on the letter, they actually click on the play button.
该<audio>元素具有显示控件的能力。在大多数浏览器中，播放按钮将在控件的左侧首先出现。因此，如果你换相应<audio>的信元（内侧元件<div>/ <img>/等），然后，用少许绝对定位的魔法，以及低opacity的<audio>，你可以把你的信“在声音”。所以，当用户点击字母时，他们实际上点击了播放按钮。
If you use the browser's default controls, then you're browser dependent, as the controls dimensions do differ between browsers. However, you can create custom controls, or use players available in the market (like JPlayer), to have constant dimensions to fit to your letters.
如果您使用浏览器的默认控件，那么您将依赖于浏览器，因为浏览器之间的控件尺寸确实不同。但是，您可以创建自定义控件，或使用市场上可用的播放器（如JPlayer），以获得适合您字母的恒定尺寸。
Example and Demo:
示例和演示：
The following code will make a click on the letter H play a sound of a horse, as long as you test it in a Chrome browser.
下面的代码会让点击字母 H 播放马的声音，只要你在 Chrome 浏览器中测试它。
CSS:
CSS：
div#lH {
position: absolute;
width: 30px;
height: 30px;
overflow: hidden;
z-index: 1;
font-size: 25px;
text-align:center;
}
audio#aH {
position: absolute;
top: -5px;
left: -5px;
z-index: 2;
opacity: 0.01;
}
HTML:
HTML：
<div id="lH">
<audio controls id="aH">
<source src="http://www.w3schools.com/html/horse.ogg" type="audio/ogg">
<source src="http://www.w3schools.com/html/horse.mp3" type="audio/mpeg">
</audio>
H
</div>
Here's a JSFiddle.
这是一个JSFiddle。
