如何在HTML中的图像点击中播放声音？

Question

我试图播放声音时，我点击或悬停在我的播放按钮？这是迄今为止我所拥有的。我有一个按钮，如果我把鼠标悬停在它上面，它会改变图像，现在我也想让它播放一个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 noob。其中audio是<audio>元素，play a是元素，它悬停

的JavaScript

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

：

Answer 1

您可以使用此。

Answer 2

在HTML中播放声音并不容易。事实上，直到html5 audio在那里！即使HTML5在任何地方都不支持，现在在浏览器中播放声音现在更容易一些。

我的建议是使用mediaelementJS，这是一个填充旧浏览器和html5音频（和视频）规范之间差距的JavaScript库。请勿使用播放器（附带完整控制栏），但仅使用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'); 

最后，发挥你点击或通过事件（在这里我使用jQuery）

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

Answer 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'); 

为什么 “鼠标悬停” 和 “鼠标移开”？也许你想为每个状态添加额外的功能，比如改变按钮的IMG SRC，制作一些效果...感觉自由。为什么“e”元素？ E元素是发起事件的对象 - 图像，链接等。用它来做所有事情（或者只是删除它）。

对于音频播放，您可以使用HTML5标签。这很容易通过主流浏览器都支持（你不问“retrocompatibility”），您可以缓存元素（如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(); 
}); 

Answer 4

你也许会发现这段代码很有用（我认为它很现代，所以它可能不适用于旧浏览器;我在Firefox 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>