Jquery mouseout停止播放?

时间:2015-01-21 19:38:38

标签: jquery html audio hover playback

大家晚上好, 我莫名其妙地坚持一个简单的问题,但只是无法弄清楚如何解决它。我第一次玩jquery玩。

现在在mousenter上播放audiofile就好了,但是我试图实现一个on mouseout功能来停止播放音频文件。 我很简单无法让它发挥作用。

我希望有人可以帮助我,这将是伟大的:)

<div class="buttonmit2ani">

            <audio id="beep-one"  preload="auto">
                <source src="audio/baby.mp3"></source>
                <source src="audio/beep.ogg"></source>
                Your browser isn't invited for super fun time.
            </audio> 
            <script>
              var beepOne = $("#beep-one")[0];
              $(".buttonmit2ani")
                .mouseenter(function() {
                  beepOne.play();
              );
            </script>               

</div>

2 个答案:

答案 0 :(得分:1)

试试这个:

var beepOne = $("#beep-one")[0];

$('.buttonmit2ani').mouseover(function(){
    beepOne.play();
}).mouseout(function(){
    beepOne.stop(); // need to write this method or .pause()
});

答案 1 :(得分:0)

没有.stop()功能(至少在Chrome中没有)。使用.pause()

var beepOne = $("#beep-one")[0];
$(".buttonmit2ani").mouseenter(function() {
  beepOne.play();
}).mouseleave(function() {
  beepOne.pause();
});
.buttonmit2ani {
  width: 100px;
  height: 100px;
  background-color: #E9EAEE;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="buttonmit2ani">
  <audio id="beep-one" preload="auto">
    <source src="audio/acdc.ogg">
      Your browser is not invited for super fun time.
  </audio>
</div>