如何在 HTML 中的 Image-Click 上播放声音？

Posted 2023-02-25

【中文标题】如何在 HTML 中的 Image-Click 上播放声音？

【英文标题】：How do I play a sound on Image-Click in HTML?

【发布时间】：2012-06-24 19:33:26

【问题描述】：

当我单击或将鼠标悬停在播放按钮上时尝试播放声音？这是我到目前为止所拥有的。我有一个按钮，如果我将鼠标悬停在它上面它会改变图像，现在我也希望它播放 mp3。

play a 
    position:relative;
    float:left;
    width:155px;
    height:134px;
    background-image:url(../images/Goodsound_PLAY_UP.png);

play a:hover 
    background-image:url(../images/Goodsound_PLAY_P.png);

I want to play a sound here

很抱歉问了这么简单的问题。我是一个 html 菜鸟，上周开始的。

【问题讨论】：

css-tricks.com/examples/SoundOnHovercss-tricks.com/play-sound-on-hover

【参考方案1】：

在 HTML 中播放声音并不容易。事实上，直到 html5 audio 才出现！即使不是所有地方都支持 html5，但现在在浏览器中播放声音会更容易一些。

我的建议是使用 mediaelementJS，这是一个 javascript 库，它填补了旧浏览器和 html5 音频（和视频）规范之间的空白。不要使用播放器（带有完整的控制栏），而只使用 mediaelementjs 组件。要使用它，只需在页面头部包含该库

<script src="js/libs/mediaelement.min.js"></script>

首先，你必须在你的 html 中加入一个音频标签：

<audio id="mySound" src="my_audio_file.mp3" type="audio/mpeg"></audio>

然后，调用 Mediaelement 库

var mySound = new MediaElement('mySound');

最后，在你的 click 或 over 事件上播放它（这里我使用 jQuery）

$('.play a').mouseover(function() mySound.play() );

【参考方案2】：

你可以用这个：

JavaScript

var audio = $("#audio");
$("play a").mouseenter( function() 
    audio.play();

其中audio 是<audio> 元素，play a 是悬停元素。

【讨论】：

JavaScript != jQuery，标签中没有 jQuery，问题中也没有提到。

【参考方案3】：

使用 jQuery：

$("object_element_id") .on ('mouseover', function(e)
    // audio play code here
);

$("object_element_id") .on ('mouseout', function(e)
    // audio pause/stop code here
);

为什么“在”？想象一下“AJAX 页面刷新”。删除它：

$("object_element_id") .off ('mouseenter');

为什么是“mouseover”和“mouseout”？也许您想为每个状态添加额外的功能，例如更改按钮的 IMG SRC，制作一些效果......随意。为什么是“e”元素？ E 元素是触发事件的对象 - 图像、链接等。用它做所有事情（或者只是删除它）。

对于音频播放，您可以使用 HTML5 标签。这很简单，并且受到主要浏览器的支持（您没有问“追溯兼容性”）您可以缓存元素（如 Mateusz 的回答）并使用它：

var $audio = $("#audio_element_id"); //for cache the element
$audio.setAttribute('src', url_link); //for change the URL file (ir can be MP3, OGG...)

$audio.play(); //for the mouseover
$audio.stop(); //for the mouseout

那么，最后的代码：

var $audio = $("audio_element"); //caching

$("object_element_id") .on ('mouseover', function(e)
    $audio.play();
);

$("object_element_id") .on ('mouseout', function(e)
    $audio.stop();
);

【参考方案4】：

您可能还会发现这段代码很有用（我认为它相当现代，因此它可能不适用于旧浏览器；我在 Firefox 32 上使用它）。

<audio controls> <source src="song.mp3" type="audio/mpeg"> </audio>

视频也有类似的：

<video   controls> <source src="clip.mp4" type="video/mp4"> </video>

【讨论】：

关于这些标签和兼容性的信息可以在这里找到：w3schools.com/tags/tag_audio.asp 和这里：w3schools.com/tags/tag_video.asp