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

debugcn 发表于 Dev

Pedro Cobos的图片

我写了一个函数，一个数组迭代，创建一个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();

用户名

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

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

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>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。