美文网首页
H5 audio标签在ios微信上不能播放音乐

H5 audio标签在ios微信上不能播放音乐

作者: 银角大王__ | 来源:发表于2017-10-26 14:03 被阅读0次

原文: http://n1.tuxi.com.cn/to/weixin/satjam/mtsahn.html

解决方案

关键就是微信的WeixinJSBridgeReady事件。这个是微信自带提供的事件,测试发现,上面说的少部分的机子微信只要做微信ready后执行播放,就可以用代码实现自动播放功能了!具体代码请看下面:

function audioAutoPlay(id){

var audio = document.getElementById(id),

play = function(){

audio.play();

document.removeEventListener("touchstart",play, false);

};

audio.play();

document.addEventListener("WeixinJSBridgeReady", function () {

play();

}, false);

document.addEventListener('YixinJSBridgeReady', function() {

play();

}, false);

document.addEventListener("touchstart",play, false);

}

audioAutoPlay('Jaudio');

后语

总结下吧,关于音乐自动播放的问题,现在可以分为三种:

1-支持audio的autoplay,大部分安卓机子的自带浏览器和微信,大部分的IOS微信(无需特殊解决)

2-不支持audio的autoplay,部分的IOS微信(本文提供的解决方案)

3-不支持audio的autoplay,部分的安卓机子的自带浏览器(比如小米,开始模仿safari)和全部的ios safari(这种只能做用户触屏时就触发播放了)

那么针对已知的三种情况,关于自动播放背景音乐的问题,我们来总结一下综合解决方案代码吧:

相关文章

网友评论

      本文标题:H5 audio标签在ios微信上不能播放音乐

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