Question

我正在开发一个字母小孩学习网站，并希望在点击图像时播放声音。例如如果用户点击A（图像），则必须播放A的发音背景音。可以不使用java脚本吗？有人可以帮忙吗？

Answer 1

没有JavaScript？我不这么认为，但JavaScript很容易。

您可以使用document.getElementById('audioTag').play();播放放置在页面中的音频元素所以这应该有效：

<a onclick="document.getElementById('yourAudioTag').play();">
     <img src="yourSrc.jpg">
</a>

JSFiddle

您甚至可以将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>

Answer 2

有趣的问题。

显然，您应该寻求JavaScript解决方案（例如this post）。引用css-tricks.com：

再一次不幸的是，我们无法告诉<audio>元素通过CSS做什么，所以我们需要JavaScript。

然而，你已经设置了一个很好的挑战。

<audio>元素可以显示控件。在大多数浏览器中，播放按钮将首先从控件的左侧开始。因此，如果您在字母元素（<audio> / <div> /等）中包含适当的<img>元素，那么，使用一点绝对定位魔法，以及低{{1}对于opacity，你可以把你的信＆＃34;放在声音＆＃34;上。因此，当用户点击该字母时，他们实际上会点击播放按钮。

如果您使用浏览器的默认控件，那么您依赖于浏览器，因为浏览器之间的控件尺寸不同。但是，您可以create custom controls或使用市场上可用的播放器（例如JPlayer），使其具有适合您字母的常量尺寸。

示例和演示：

以下代码将点击字母H播放马的声音，只要您在Chrome浏览器中进行测试即可。

CSS：

<audio>

HTML：

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;
}

这里是JSFiddle。

在图像上播放声音点击html

2 个答案: