多个音频元素干扰同一页面

Posted 2023-03-22

【中文标题】多个音频元素干扰同一页面

【英文标题】：Multiple Audio elements interfering on the same page

【发布时间】：2022-01-16 18:30:17

【问题描述】：

我有一个带有多个音频气泡的 web 应用，但播放一个音频气泡会播放来自不正确音频气泡的音频。我正在使用：this.audio = new Audio(url)。他们以某种方式干扰。如何解决？

【参考方案1】：

确保所有音频对象都可以相互访问，并在开始之前暂停它们。

const audioPromises = [
  audioFromUrl('https://opus-bitrates.anthum.com/audio/hyper/music-96.opus'), 
  audioFromUrl('https://opus-bitrates.anthum.com/audio/music-96.opus'),
]

document.querySelectorAll('.play').forEach(el => el.addEventListener('click', () => 
  play(parseInt(el.dataset.idx))
))

document.querySelectorAll('.stop').forEach(el => el.addEventListener('click', stopAll))

async function play(idx) 
  const audio = await audioPromises[idx]
  await stopAll()
  audio.play()


function stopAll() 
  return Promise.all(audioPromises)
    .then(audios => audios.map(audio => audio.pause()))



async function audioFromUrl(url) 
  const arrayBuffer = await (await fetch(url)).arrayBuffer()
  const audio = new Audio()
  audio.src = URL.createObjectURL(
    new Blob([arrayBuffer])
  )
  return audio

<button class="play" data-idx="0">Play 1</button>
<button class="play" data-idx="1">Play 2</button>
<br /><br />
<button class="stop" data-idx="1">Stop All</button>