如何在 HTML 中的图像单击上播放声音

How do I play a sound on Image-Click in HTML?

本文关键字：图像 单击 播放声音 HTML      更新时间：2023-09-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菜鸟，上周开始。

在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>

然后，调用媒体元素库

var mySound = new MediaElement('mySound');

最后，在你的点击或结束事件中播放它（这里我使用jQuery）

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

你可以使用这个：

JavaScript 

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

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

使用 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');

为什么是"鼠标悬停"和"鼠标退出"？也许您想为每个状态添加额外的功能，例如更改按钮的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();
});

您可能还会发现此代码很有用（我认为它相当现代，因此可能无法与旧浏览器一起使用;我将其与火狐 32 一起使用）。

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

视频也有类似的：

<video width="320" height="240" controls> <source src="clip.mp4" type="video/mp4"> </video>
相关文章：