Question

我正在尝试构建自定义音频播放器。尽管这似乎是一个非常普遍的疑问，但不确定如何解决此问题。

许多浏览器不允许您第一次从javascript（阻止自动播放的浏览器）中调用play（），除非用户未与音频播放按钮进行交互。但是由于我正在使用CSS创建自定义播放器，所以我要做的就是在用户单击自定义播放按钮时触发一个事件，然后使javascript调用to（）方法。最好的解决方法是什么？

JS Fiddle

似乎在小提琴中运行良好，但否则出现以下错误：

Uncaught (in promise) DOMException: The play() request was interrupted by a call to pause().

Answer 1

// Immediately load the audio in the background. No need to add to DOM
const loadAudio = new Promise(resolve => {
  const audio = new Audio()
  audio.src = 'https://fetch-stream-audio.anthum.com/audio/opus/demo/96kbit.opus'

  // resolve audio as ready to play when we've fetched enough playback bytes
  audio.addEventListener('canplaythrough', () => {
    resolve(audio)
  })
})

async function play() {
  // wait for audio to be ready (loadAudio Promise resolved)
  const audio = await loadAudio

  // restart if already playing
  audio.currentTime = 0

  audio.play()
}

async function stop() {
  const audio = await loadAudio
  audio.pause()
}

button {
  font-size: 18px;
  padding: .5em 1em;
  border: none;
  border: none;
  background: #e9e9e9;
  color: #4c8bf5;
  cursor: pointer;
}

<button class="play" type="button" onclick="play()" title="Play">▶</button>
<button type="button" onclick="stop()" title="Stop">■</button>

此外，考虑将Opus而不是MP3用于更小，质量更好的文件。

创建自定义音频播放器时如何第一次播放音频

1 个答案: