我正在尝试构建自定义音频播放器。尽管这似乎是一个非常普遍的疑问,但不确定如何解决此问题。
许多浏览器不允许您第一次从javascript(阻止自动播放的浏览器)中调用play(),除非用户未与音频播放按钮进行交互。但是由于我正在使用CSS创建自定义播放器,所以我要做的就是在用户单击自定义播放按钮时触发一个事件,然后使javascript调用to()方法。最好的解决方法是什么?
似乎在小提琴中运行良好,但否则出现以下错误:
Uncaught (in promise) DOMException: The play() request was interrupted by a call to pause().
答案 0 :(得分: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用于更小,质量更好的文件。