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

Question

我正在尝试构建自定义音频播放器。虽然这似乎是一个非常普遍的疑问，但不确定具体的解决方案是什么。

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

JS Fiddle

似乎运行在 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 来获得更小、质量更好的文件。

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

How to play audio first time when creating customized audio player

html

javascript

html5-audio