时间戳

首页 > 解决方案 > JS - 防止多个音频文件同时播放

javascript - JS - 防止多个音频文件同时播放

问题描述

我编写了一个函数，它遍历一个数组，创建一个querySelector, 一个audio元素，并addsEventListener在单击按钮时播放音频元素。

我遇到的问题是我无法弄清楚如何一次只播放一首曲目。理想的行为是当用户单击一个按钮时，所有其他轨道都停止或暂停。

我尝试按照我在 SO 中找到的类似解决方案中的建议使用 for 循环，但它没有用。我想我没有将它添加到应该控制流量的位置。

任何帮助将不胜感激，谢谢。

const tracks = ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12"]
// 

const newAudioTracks = () => {
  tracks.forEach(function(track) {
    const button = document.querySelector(`#track-${track}`);
    const musicTrack = new Audio(`/music/track${track}.mp3`);
    musicTrack.id = track;
    button.addEventListener('click', (event) => {
      event.preventDefault();
      musicTrack.paused ? musicTrack.play() : musicTrack.pause();
    })
  })
}

newAudioTracks();

标签： javascripthtml5-audioaddeventlistener

解决方案

问题是您的事件只会为一个元素触发，然后您需要遍历其他元素一个一个暂停。

这是一个例子，我通过属性控件而不是创建外部按钮来播放，但是如果使用自定义按钮，逻辑是相同的。

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();
      })
    })
})
<audio src="https://file-examples-com.github.io/uploads/2017/11/file_example_MP3_700KB.mp3" controls></audio>
<audio src="https://file-examples-com.github.io/uploads/2017/11/file_example_MP3_700KB.mp3" controls></audio>
<audio src="https://file-examples-com.github.io/uploads/2017/11/file_example_MP3_700KB.mp3" controls></audio>
<audio src="https://file-examples-com.github.io/uploads/2017/11/file_example_MP3_700KB.mp3" controls></audio>

推荐阅读