Safari11对HTML5音频的新自动播放限制
Safari11对HTML5音频的新自动播放限制
提问于 2017-06-19 19:19:21
我试图弄清楚Safari11的(和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()
})
}<div id='root'/>
而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'
// audio.controls = true
btn.appendChild(textLabel)
document.getElementById('root').appendChild(btn)
document.getElementById('root').appendChild(audio)
const mockedPromise = new Promise((resolve, reject) => {
setTimeout(() => {
const src = 'https://raw.githubusercontent.com/vnglst/autoplay-tutorial/master/mp3/winamp.mp3'
return resolve(src)
}, 500)
})
btn.onclick = (e) => {
mockedPromise.then(src => {
audio.src = src
audio.play()
})
}<div id='root'/>
有人知道Safari是如何判断某个东西是否是自动播放的吗？我不是在寻找一种变通的方法(例如，启动和暂停会有帮助)，但我正在尝试弄清楚它是如何工作的。
(有关Safari新的自动播放策略的更多背景信息可以在这里找到：https://webkit.org/blog/7734/auto-play-policy-changes-for-macos/)
回答 1
Stack Overflow用户
发布于 2018-11-11 23:00:00
你需要把你的算法从
user clicks -> loads audio information -> changes source -> play
至
user clicks -> changes source -> play
基本上，您需要在audio中更改src，并在用户单击播放按钮后立即开始播放。
当存在中介抓取时，iOS会阻止自动播放。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/44629198
复制相关文章
相似问题