Willdark

每一个不曾起舞的日子,都是对生命的辜负

关于在移动端audio音频播放的坑

<前言>项目中有一需求,点击开始按钮,倒计时3秒后,播放摇骰子的音频,看似很简单的一个需求,却也有一个大坑,现记录下来与大家一起探讨。

HTML代码

<audio id=”dice-voice”>
<source src=”voice/dice.mp3″ type=”audio/mp3″>
<source src=”voice/dice.ogg” type=”audio/ogg”>
<source src=”voice/dice.wav” type=”audio/wav”>
<embed height=”100″ width=”100″ src=”voice/dice.mp3″ />
音频无法播放!
</audio>

Javascript代码

//大概逻辑是点击一个开始按钮 3秒倒计时后播放音频
btn.addEventListener(‘click’,function(event){
var e = event || window.event;
var target = e.target || e.srcElement;
setTimeout(function(){
document.getElementByTagName(‘audio’)[0].play();
},3000)
})

现象:
PC端手机模拟器正常播放
微信内置浏览器正常播放
安卓UC浏览器报错
iOS Safari浏览器报错

安卓报错信息:
DOMExeception{INDE_SIZE_ERR:1,
DOMSTRING_SIZE_ERR:2,
HIERARCHY_REQUEST_ERR:3,

}

iOS报错信息:
DOMExeception{line:848,column:13,sourceURL:”…”}

问题排查:
设置多个播放格式的视频,仍存在问题。
音频设置为自动播放,可以播放。
播放封装函数,扔存在问题。

问题根源:
多方查阅资料,整理发现:
很多浏览器在优化用户体验时候规定:声音的播放需要是对用户透明的,即可通过自动播放的形式,或者进行按钮点击来触发音频的播放。
而我的代码中虽然是在点击事件里面播放,但进行了3秒的延迟不是实时的播放,所以浏览器拦截了该行为并抛出异常。

解决方案:
目前暂时没想到好的解决方案,目前所采用的方式是在该段音频前添加3秒的空白声音。
也希望有好的方案的与我讨论,感谢!

点赞

发表评论

电子邮件地址不会被公开。 必填项已用*标注