IOS微信音乐播放问题

IOS Safari 的Audio支持

Audio标签为html5中新增的标签,各种浏览器的支持情况大概如下:
浏览器支持

新特性:
这里写图片描述

但这边要注意的是移动平台并不能很好的兼容autoplay属性以及preload属性。
实际问题参见右侧传送门:HTML5 Audio在iOS设备上的问题

应该是苹果公司为了节省用户的流量在移动设备上主动禁用了这些标签。
这里写图片描述
这里写图片描述

主要可以看iOS的开发者页面Safari HTML Audio&Video Guide
尤其是iOS-Specific Considerations选项。

总而言之,在iOS的Safari上,音频不能被自动播放,需要一个交互来触发它。

解决方案

<html>
<head>...</head>
<body>
<audio preload="preload" id="car_audio" src="media/bgMusic.mp3" loop></audio>
<!--a sample audio-->
<!--use weixin API-->
        <script>
         setTimeout(function(){
         $(window).scrollTop(1);
         },0);
          document.getElementById('car_audio').play();
         document.addEventListener("WeixinJSBridgeReady", function () {
                WeixinJSBridge.invoke('getNetworkType', {}, function (e) {
          document.getElementById('car_audio').play();
                });
            }, false);
        </script>
</body>
</html>

这一段能够在iOS微信段实现自动播放,原理是,Weixin对于浏览器的操作是介于APP层面的,相当于一次模拟用户操作,能够触发Safari的audio进行播放。

特别记录一下。折磨了我一周的问题。
之后会写一段模拟操作的代码来尝试一下。
先到这里为止。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值