我正在试图弄清楚Safari 11的(和iOS')自动播放限制是如何实现的,我不明白为什么以下内容不会开始播放音频文件:
/*
Call stack, this doesn't work
*/
const btn = document.createElement('BUTTON')
const textLabel = document.createTextNode('Play')
const audio = new window.Audio()
audio.src = 'https://raw.githubusercontent.com/vnglst/autoplay-tutorial/master/mp3/winamp.mp3'
// audio.controls = true
btn.appendChild(textLabel)
document.getElementById('root').appendChild(btn)
document.getElementById('root').appendChild(audio)
btn.onclick = e => {
window
.fetch(`https://api.github.com/repos/vnglst/autoplay-tutorial/contents/mp3/modem-sound.mp3`)
.then(resp => resp.json())
.then(json => {
audio.src = json.download_url
audio.play()
})
}Run Code Online (Sandbox Code Playgroud)
<div id='root'/>Run Code Online (Sandbox Code Playgroud)
Safari适用于以下情况:
/*
Call stack, using a fake Promise. This works
*/
const btn = document.createElement('BUTTON')
const textLabel = document.createTextNode('Play')
const audio = new window.Audio()
audio.src = 'https://raw.githubusercontent.com/vnglst/autoplay-tutorial/master/mp3/modem-sound.mp3' …Run Code Online (Sandbox Code Playgroud)