在 html 中单击图像时播放声音

Posted 2023-02-24

【中文标题】在 html 中单击图像时播放声音

【英文标题】：play a sound on image click in html

【发布时间】：2016-01-09 16:51:18

【问题描述】：

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

【问题讨论】：

没有javascript？怎么样？

因为此时我只需要网站的原型。

我不知道这是否可能。代码虽然很简单。 ***.com/questions/10083788/…

【参考方案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>

【讨论】：

我正在使用 Visual Studio 2015。它无法解决这个问题。

这对我有用..您可以通过初始化其中的路径来使函数更通用 function myAudioFunction(word) var base = "C/"; var path=base.concat(word, ".mp3"); var textAudio = 新音频（路径）； textAudio.play();

【参考方案2】：

有趣的问题。

显然，您应该寻求 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。