當使用 javascript 使用 onclick 停止音頻時，如何停止 animation？

Question

當音頻暫停時，我遇到了停止 animation 的問題。 基本上，當頁面加載時，然后當我點擊 div 然后音樂開始播放 animation 但是當我再次點擊這個 div 暫停音樂時，音樂被暫停但 animation 沒有停止。有人可以幫幫我嗎？

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

Answer 1

您應該通過收聽其事件正確跟蹤音頻元素何時播放或不播放。

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