在jQuery中暂停音频之前添加延迟

Posted 2023-02-25

【中文标题】在jQuery中暂停音频之前添加延迟

【英文标题】：Add delay before pausing audio in jQuery

【发布时间】：2020-04-22 17:49:56

【问题描述】：

当用户将鼠标悬停在 div 上时，我正在尝试淡入/淡出音频文件。

淡入工作，但音频在淡出完成之前暂停。这是我当前的代码：

$(function () 
    $('#playmusic').hover(
        function () 
            $('#music')[0].play();
            $('#music').animate(volume: 1, 1000);
        ,
        function () 
            $('#music').animate(volume: 0, 1000);
            $('#music')[0].pause();    
        
    )
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<p id="playmusic">hover to hear audio</p>

<audio id="music" preload="auto">
     <source src="https://upload.wikimedia.org/wikipedia/commons/e/ec/A_Tale_of_Distant_Lands.mp3" type="audio/mpeg">
</audio>

我想我需要在我的代码中添加一个.delay，以便在淡出发生后暂停音频但是以下给我一个错误：

$('#music').delay(1000).[0].pause();

有人知道我哪里出错了吗？

【参考方案1】：

如果你想延迟停止，可以使用 setTimeout 执行它

这是一个例子

setTimeout(function()
   $('#music')[0].pause();
, 1000);

时间以毫秒为单位。

delay 函数用于 jQuery 效果，包括动画，其他最好使用 setTimeout。

【参考方案2】：

我建议使用动画的complete callback 来暂停音频。它在动画结束后触发，即当音频淡入淡出完成时。

与使用独立计时器相比，此方法的一个优点是，无论动画的持续时间如何，只要动画完成，音频就会暂停。

使用这种格式提供回调函数：

.animate(属性[, 持续时间] [, 缓动] [, 完成])

完成 类型：函数() 动画完成后调用的函数，每个匹配元素调用一次。

或者，使用alternate format 指定选项：

.animate（属性，选项）

我还建议使用stop() 来防止动画排队。否则，当快速悬停在触发器上和离开时，动画的累积会变得混乱。

这是一个演示：

$(function() 

  let $music = $('#music');

  $('body').on('click', function() 
    $(this).addClass('clicked');
  );

  function playMusic() 
    $music
      .stop(true, false)
      .animate(
        volume: 1
      , 
        duration: 1000,
        start: function() 
          this.play();
        
      );
  

  function pauseMusic() 
    $music
      .stop(true, false)
      .animate(
        volume: 0
      , 
        duration: 1000,
        complete: function() 
          this.pause();
        
      );
  

  $('#playmusic').hover(
    playMusic,
    pauseMusic
  );

);

body 
  min-height: 100vh;
  transition: background-color 200ms;


body.clicked 
  background-color: #FFFFF5;


#playmusic 
  display: inline-block;
  padding: 0.25em 0.5em;
  background-color: #EEF;
  cursor: pointer;
  transition: background-color 200ms, opacity 200ms, margin-left 200ms;
  border-radius: 0.25em;
  visibility: hidden;
  opacity: 0;
  margin-left: -100%;


body.clicked #playmusic 
  visibility: visible;
  opacity: 1;
  margin-left: 0;


body.clicked #playmusic:hover 
  background-color: #DDFFDD;

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<p>Click the page first to interact with the document.</p>
<p id="playmusic">Hover to hear audio</p>

<audio id="music" preload="auto" allow="autoplay" autoplay>
    <source src="https://upload.wikimedia.org/wikipedia/commons/e/ec/A_Tale_of_Distant_Lands.mp3" type="audio/mpeg">
</audio>