Javascript 一次仅播放一个音频

发布于04月25日

我有一个使用音频标签的播客链接列表，当我点击播放按钮时，它们都会播放，但我希望第一个在我播放另一个时暂停

<div class="podcast-container">
    <audio controls src="https://assets.mixkit.co/music/preview/mixkit-tech-house-vibes-130.mp3"></audio>
    <audio controls src="https://assets.mixkit.co/music/preview/mixkit-hazy-after-hours-132.mp3"></audio>
    <audio controls src="https://assets.mixkit.co/music/preview/mixkit-tech-house-vibes-130.mp3"></audio>
</div>

我try 使用下面的代码暂停音频，但它根本不播放.请帮

  const tracks = Array.from(document.querySelectorAll('audio'));
   tracks.forEach(function (track) {
      track.addEventListener('play', (event) => {
         tracks.forEach(function (track) {
             track.pause();
         })
      })
   })

推荐答案

您的代码的问题在于，您没有判断当前播放的音频，传递pause()将暂停所有音频.您需要使用event这样判断当前音频，如果曲目与当前曲目不相等，则暂停它.

if (track !== event.target) track.pause();

总体代码应如下所示.

   const tracks = Array.from(document.querySelectorAll('audio'));
    tracks.forEach(function (track) {
    track.addEventListener('play', (event) => {
     tracks.forEach(function (track) {
        if (track !== event.target) track.pause();
     })
    })
   })