javascript 鼠标悬停时的音频

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/3342803/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-25 00:53:44  来源:igfitidea点击:

Audio on mouseover

jqueryhtmljavascript

提问by oshirowanen

It it working partially, but how do I get the below to work with multiple audio files:

它部分工作,但我如何让以下内容与多个音频文件一起使用:

    <!DOCTYPE HTML>
    <html>
    <body>

    <script language="javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>

    <script type="text/javascript">
    $(function(){
        var birdhover     = $('.birds');
            var birdaudio = birdhover.find('audio')[0];

        birdhover.hover(function(){
           birdaudio.play();
        }, function(){
           birdaudio.stop();
        });
    });
    </script>

    <div class="birds" style="width:30px;height:30px;background-image:url(image1.gif');cursor:pointer;">
       <audio src="sound1.ogg" preload="auto"></audio>
    </div> 

    <div class="birds" style="width:30px;height:30px;background-image:url('/home/imran/Desktop/images/vowel_short_2.gif');cursor:pointer;">
(image2.gif');cursor:pointer;">
       <audio src="sound2.ogg" preload="auto"></audio>
    </div> 

    </body>
    </html>

Both images play the same sound.

两个图像播放相同的声音。

回答by jAndy

if you don't mind using HTML5:

如果您不介意使用HTML5

HTML

HTML

<div class="birds">
   <audio src="/sounds/bird.mp3" preload="auto"></audio>
</div> 

Javascript

Javascript

$(function(){
    var birdhover     = $('.birds');
        var birdaudio = birdhover.find('audio')[0];

    birdhover.hover(function(){
       birdaudio.play();
    }, function(){
       birdaudio.stop();
    });
});

http://www.w3schools.com/html5/tag_audio.asp

http://www.w3schools.com/html5/tag_audio.asp

回答by Barrie Reader

updated for multiple sound files
This is what I used before: http://plugins.jquery.com/project/sound

更新了多个声音文件
这是我以前使用的:http: //plugins.jquery.com/project/sound

Usage:

用法:

$("#sound").sound({swf: url});
$("#sound").load(url);
$("#sound").play();
$("#sound").pause();
$("#sound").stop();
$("#sound").volume(0-100);

(taken from jQuery plugins page)

取自 jQuery 插件页面

for mouseover:

鼠标悬停:

$('#selector').mouseover(function() {
   $("#sound").play('path/to/wav/or/mp3');
});

$('#second-selector').mouseover(function() {
   $("#sound2").play('path/to/second/wav/or/mp3');
});