如何在使用JavaScript的onclick停止音频时停止动画？

Question

我在暂停音频时无法停止动画。基本上，当页面加载时，然后当我单击div时音乐开始播放动画，但是当我再次单击该div暂停音乐时，音乐被暂停但动画没有停止。有人可以帮我吗？

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>

style.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");  
});

Answer 1

您应该通过listening to its events正确跟踪音频元素何时播放或不播放。

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