Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
784 views
in Technique[技术] by (71.8m points)

jquery - Audio on mouseover

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.

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

0 votes
by (71.8m points)

if you don't mind using HTML5:

HTML

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

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


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界,一个免费开放的程序员编程交流平台!开放,进步,分享!让技术改变生活,让极客改变未来! Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...