如何在 HTML 中的 Image-Click 上播放声音? [英] How do I play a sound on Image-Click in HTML?

问题描述

当我点击或悬停在我的播放按钮上时，我正在尝试播放声音?这是我到目前为止所拥有的.我有一个按钮，如果我将鼠标悬停在它上面，它会改变图像，现在我还想让它播放 mp3.

I'm trying to play a sound when i click or hover over my play button? Here's what i have so far. I have a button, if i hover over it it changes the Image, now i also want it to play an 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 菜鸟，上周开始.

Im sorry for asking such an easy question. I'm an html noob, started last week.

推荐答案

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

It's not that easy to play a sound in HTML. In fact, it wasn't until the html5 audio was there ! Even if html5 is not supported everywhere, it's now a little bit easier to play a sound in the browser.

我的建议是使用 mediaelementJS，这是一个 javascript 库，可以填补旧浏览器和 html5 音频(和视频) 规格.不要使用播放器(带有完整的控制栏)，而只使用 mediaelementjs 组件.要使用它，只需在页面头部包含库

My advice is to use mediaelementJS, a javascript library that fills the gap between old browser and html5 audio (and video) spec. Do not use the player (that comes with a full control bar), but use only the mediaelementjs component. To use it, simply include the library in the head of your page

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

首先，你必须在你的 html 中放置一个音频标签:

First, you have to put an audio tag in your html :

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

然后，调用Mediaelement库

Then, call the Mediaelement library

var mySound = new MediaElement('mySound');

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

Finally, play it on your click or over event (here I use jQuery)

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

这篇关于如何在 HTML 中的 Image-Click 上播放声音?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！