我正在开发一个字母儿童学习网站，并希望在单击图像时播放声音。例如如果用户点击 A(image)，则必须在背景中播放 A 的发音。不使用java脚本可以吗？有人可以帮忙吗？
【问题讨论】：
标签： html
没有 JavaScript？我不这么认为，但 JavaScript 非常简单。
您可以使用document.getElementById('audioTag').play(); 播放已放入页面的音频元素
所以这应该有效：
<a onclick="document.getElementById('yourAudioTag').play();">
<img src="yourSrc.jpg">
</a>
您甚至可以像这样将 onclick 方法放入您的图像标签中：
<img src="yourSrc.jpg" onclick="document.getElementById('yourAudioTag').play();">
然后您可以使用.pause() 方法暂停音频，如果您想加载一些新音频，则可以使用.load()。它的工作原理类似于 HTML5 视频标签。
如果您不想为音频使用元素，可以这样声明：
var audio = new Audio('audio_file.mp3'); audio.play();
并以同样的方式使用它。只是代替
document.getElementById('yourAudioTag').play();
你会使用
audio.play();
整个事情的一个例子看起来像这样：
<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>
【讨论】：
有趣的问题。
显然，您应该寻求 JavaScript 解决方案（例如 this post）。 引用css-tricks.com：
很遗憾，我们无法通过 CSS 告诉
<audio>元素该做什么，因此我们需要 JavaScript。
但是你已经设置了一个相当不错的挑战。
<audio> 元素可以显示控件。在大多数浏览器中，播放按钮会在控件中从左开始出现。
因此，如果您将适当的<audio> 元素包装在您的字母元素（<div>/<img>/ 等）中，那么，对于<audio>，使用一点绝对定位魔法和较低的opacity，您可以把你的信“盖过声音”。因此，当用户点击字母时，他们实际上是点击了播放按钮。
如果您使用浏览器的默认控件，那么您将依赖于浏览器，因为不同浏览器的控件尺寸确实不同。但是，您可以create custom controls，或使用市场上可用的播放器（如JPlayer），以获得适合您的字母的恒定尺寸。
示例和演示：
下面的代码会让点击字母H播放马声，只要你在Chrome浏览器中测试一下。
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：
<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>
这是JSFiddle。
【讨论】：