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

我编写了一个函数，该函数迭代数组，创建一个

querySelector

、一个

audio

元素和

addsEventListener

以在单击按钮时播放音频元素

我的问题是，我不知道如何一次只播放一首曲目。理想的行为是，当用户单击按钮时，所有其他曲目都会停止或暂停

我尝试使用for循环，正如我在SO中找到的类似解决方案所建议的那样，但它不起作用。我想我没有把它添加到应该添加的地方，以控制流量

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

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();

---

问题是，您的事件将仅为一个元素触发，然后您需要逐个暂停迭代其他元素

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

const tracks=Array.from（document.querySelectorAll（'audio'）；
tracks.forEach（函数（track）{
track.addEventListener（'play'，（事件）=>{
tracks.forEach（函数（track）{
如果（track！==event.target）track.pause（）；
})
})
})

---

我认为问题在于你有太多的musicTrack，你可以点击播放。当然，当你点击另一首音乐曲目时。这是行不通的。一种可能的方法是播放一首音乐曲目。如果在单击下一次跑步之前上一个音乐曲目尚未完成，您可以停止并删除它，然后播放新的音乐曲目。