美文网首页
audio 标签 App 踩坑

audio 标签 App 踩坑

作者: 全幼儿园最可爱的猪 | 来源:发表于2019-07-27 16:37 被阅读0次

场景:

#####使用 h5 audio 标签播放音频, 在pc端能播放, iOS和部分Android手机无法播放。

手机端为了限制audio标签自动播放,限制必须通过用户操作页面来触发audio播放,如touch,click事件。

解决方案:

1. audio 标签单例,页面中存在一个audio标签,通过更改src的方式,更改播放资源
2.  触发方式,iOS click不兼容;通过touch页面元素的绑定,在回调函数中直接操作audio.play/pause。
同时在iOS的默写版本需要提前load audio资源,此时touchstart load资源,touchend 播放资源。
3. 执行play/pause的回调方法, 不能在回调函数的nexttick 中,如在click 回调中无效
setTimeout(function(){audio.play()})

相关文章

网友评论

      本文标题:audio 标签 App 踩坑

      本文链接:https://www.haomeiwen.com/subject/phuerctx.html