Добавьте задержку перед приостановкой звука в jQuery - PullRequest
Новая
       49

Добавьте задержку перед приостановкой звука в jQuery

0 голосов
/ 22 апреля 2020

Я пытаюсь добавить / удалить аудиофайл, когда пользователь наводит курсор на элемент 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();

Кто-нибудь знает, где я иду не так?

Ответы [ 2 ]

0 голосов
/ 22 апреля 2020

Я рекомендую использовать complete callback анимации для приостановки звука. Он срабатывает после анимации, т. Е. Когда звук исчезает.

Одним из преимуществ этого метода по сравнению с использованием независимого таймера является то, что звук приостанавливается, как только анимация завершена, независимо от продолжительности анимации.

Предоставьте функцию обратного вызова, используя этот формат:

.animate (свойства [, продолжительность] [, замедление] [, завершено])

complete
Тип: Function ()
Функция, вызываемая после завершения анимации, вызывается один раз для соответствующего элемента.

Или с использованием альтернативный формат для указания параметров:

.animate (свойства, параметры)

Я также предлагаю использовать stop() для предотвращения очереди анимаций. В противном случае накопление анимации может привести к путанице при быстром наведении и выключении триггера.

Вот демонстрация: 

$(function() {

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

  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
  );

});
<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>
0 голосов
/ 22 апреля 2020

Если вы хотите отложить остановку, можете выполнить ее с помощью setTimeout

Вот пример 

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

Время задается в мс.

задержка функция используется для jQuery эффектов, включая анимацию, с другой стороны лучше использовать setTimeout .

...