audio.play报错 ,Unhandled Rejection (NotAllowedError
前景:
框架:使用umijs比较全面框架,react栈。
问题前景:
关于audio不能自动播放,这里我就不重复了,我的问题就是在iPhone机(v11.3.x)上已经点击了按钮(和页面交互了),
还是报了 Unhandled Rejection (NotAllowedError): The request is not allowed by the user agent or the platform in the current context, possibly because the user denied permission.
排查问题:
1.经过不断排查,在交互上audio.play()是没有问题的
如下是正常播放的
<button onClick={() => {clickEgg(1)}}>播放</button>
const clickEgg = (index) => {
let audioEle = document.getElementById('bg-music')
audioEle.play()
};
报错情况,很多情况下,我们需要请求接口再做某个音响播放的。就是这个同步请求就报错了
<button onClick={() => {clickEgg(1)}}>播放</button>
let audioEle = document.getElementById('bg-music')
const clickEgg = async (index) => {
//这里有个请求
const isLogin = await getIsLoginAsync().catch(err => {
setShowLoginDialog(true)
})
if (!isLogin) {
setShowLoginDialog(true)
return;
}
audioEle.play()
};
解决问题:
<button onClick={() => {clickEgg(1)}}>播放</button>
let audioEle = document.getElementById('bg-music')
const clickEgg = async (index) => {
audioEle.muted = true
let p = audioEle.play()
//这里有个请求
const isLogin = await getIsLoginAsync().catch(err => {
setShowLoginDialog(true)
})
if (!isLogin) {
setShowLoginDialog(true)
return;
}
//为了兼容iphone
if (p !== undefined) {
p.then(() => {
audioEle.muted = false
audioEle.pause()
audioEle.currentTime = 0;
setTimeout(() => {
audioEle.play()
}, 0)
}).catch((e) => {
console.log(e)
})
}
};
参考:https://juejin.cn/post/684490...这篇文章写的是比较全面,很有参考价值
转载自:https://segmentfault.com/a/1190000041733157