Как остановить анимацию при остановке звука с помощью javascript? - PullRequest
Новая
       13

Как остановить анимацию при остановке звука с помощью javascript?

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

У меня проблема с остановкой анимации при приостановке звука. В основном, когда страница загружается, то когда я нажимаю в div, musi c начинает играть с анимацией, но когда я снова нажимаю на этот div, чтобы приостановить воспроизведение musi c, тогда musi c приостанавливается, но анимация не останавливается. Кто-нибудь может мне помочь?

Html Код 

<audio id="track" autoplay loop>
  <source src="video/dw_svends_awakening_music.mp3" type="audio/mpeg" />
</audio>
<div class="bar-c play" id="sound_button">
  <div id="bar-1" class="bar"></div>
  <div id="bar-2" class="bar"></div>
  <div id="bar-3" class="bar"></div>
  <div id="bar-4" class="bar"></div>
  <div id="bar-5" class="bar"></div>
  <div id="bar-6" class="bar"></div>
</div>

стиль. css

.bar.noAnim {
    -webkit-animation: none;
    animation: none;
    -webkit-animation-name: none;
    animation-name: none;
}

javascript код 

function playPause() {
  if (track.paused) {
    track.play();
    //controlBtn.textContent = "Pause";
    controlBtn.className = "play";
  } else {
    track.pause();
    //controlBtn.textContent = "Play";
    controlBtn.className = "pause";
  }
}

controlBtn.addEventListener("click", playPause);

track.addEventListener("ended", function() {
  controlBtn.className = "play";
});

$("#sound_button").click(function() {
  $(".bar").toggleClass("noAnim");  
});

1 Ответ

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

Вы должны правильно отслеживать, когда аудио элемент воспроизводится или нет, слушая его события . 

const audio = document.querySelector('audio');
audio.addEventListener('play', (e) => {
  controlBtn.classList.add('playing');
});
audio.addEventListener('pause', (e) => {
  controlBtn.classListe.remove('playing');
});
...