gpt4 book ai didi

javascript - Safari 11 对 HTML5 音频的新自动播放限制

转载 作者:技术小花猫 更新时间:2023-10-29 10:28:16 24 4
gpt4 key购买 nike

我想弄清楚 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()
})
}
<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/)

最佳答案

你需要改变你的算法

用户点击 -> 加载音频信息 -> 更改源 -> 播放

用户点击 -> 更改源 -> 播放

基本上,您需要更改 audio 中的 src 并在用户单击播放按钮后立即开始播放。

iOS 会在存在中间提取时阻止自动播放。

关于javascript - Safari 11 对 HTML5 音频的新自动播放限制,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44629198/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com