如何将音频添加到 HTML 图像？

Posted 2023-02-25

【中文标题】如何将音频添加到 HTML 图像？

【英文标题】：How to add audio to a HTML image?

【发布时间】：2014-03-24 08:41:56

【问题描述】：

我对这一切还很陌生，但我正在尝试将音频 mp3 声音添加到 html 图像中，单击时会播放该图像。我怎样才能做到这一点？

我已经尝试了一些东西，比如''标签，或者安装基于java的东西，比如soundmanager2，但是它们似乎都不起作用。 问题是，我不知道如何正确使用它们。

我正在使用dreamweaver CS6，其中应该有一个选项“行为”-->播放声音，但它不存在，所以我迷失了这一切。

【参考方案1】：

您可以使用 Audio and Video DOM methods play() 和 pause() onclick of image working Demo 来实现这一点

<audio id="audio_play">
    <source src="http://www.w3schools.com/tags/horse.ogg" type="audio/ogg" />
    <source src="http://www.w3schools.com/tags/horse.mp3" type="audio/mpeg" />
</audio>

<img src="http://bit.ly/1kX7D49" onClick="document.getElementById('audio_play').play(); return false;" />

<img src="http://bit.ly/1mq0tIt" onClick="document.getElementById('audio_play').pause(); return false;" />

【讨论】：

感谢这确实有效。还有一件事，链接如何？我尝试将您的解决方案添加到链接内的图像中，但链接不起作用，或者如果我将其直接添加到链接中，它仍然不起作用。

我找到了一个解决方法，当我将 onmouseclick 更改为 onmouseover 时，问题就消失了。

您能否在小提琴中发布您的问题，或者尽管我们可以通过点击跟踪问题？

【参考方案2】：

您可以使用 HTML5 音频标签：

<audio controls>
  <source src="horse.ogg" type="audio/ogg">
  <source src="horse.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio> 

更多信息： http://www.w3schools.com/html/html5_audio.asp

【参考方案3】：

您不需要任何播放器，因为 html5 能够播放声音文件。看看这个：http://www.w3schools.com/html/html5_audio.asp

您可以使用 jQuery 来加载声音文件。

$('#my_image').click(function()
   //some code to load the audio file here
)

也许您需要一些进一步的代码或 css 来隐藏控件和停止播放音频等。