解决苹果ios端微信无法自动播放H5页面背景音乐

最近做微信H5页面开发的时候，在页面加入背景音乐，并且设置自动播放。

在PC端模拟手机时是可以正常显示播放的，在安卓端微信上也可以正常播放，然后到苹果端微信就不能正常播放了。

找了许久的原因是苹果ios端浏览器是不允许有声音的媒体自动播放的，必须要用户手动点击播放。然后在网上找了很多解决方法，终于找到了一个很好的解决方法，下面贴出具体事例代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"><title>Auto play html audio in iOS WeChat InAppBrowser the right way</title>
</head>
<body><h1>在 iOS 微信浏览器中自动播放 HTML5 audio(音乐) 的正确方式</h1><p>核心原理: 在微信的JS-API 中 play 一下 audio 即可达到自动播放的目的(应该是微信自己做了处理)</p><br><br><br><audio id="bgmusic" src="http://oj1hxt5z0.bkt.clouddn.com/123.mp3" autoplay preload loop controls></audio><!-- 当使用方法1时必须加载 JS-SDK 的 JS 文件, 方法2不需要加载这个 JS --><script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script><script>// 方法1: 现在微信官方已经推出了微信JS-SDK, 最好还是不要使用"野生"方式, 因为不知道什么时候就可以不能用了!// http://mp.weixin.qq.com/wiki/7/aaa137b55fb2e0456bf8dd9148dd613f.html// 通过config接口注入权限验证配置后, 在 ready 中 play 一下 audiofunction autoPlayAudio1() {wx.config({// 配置信息, 即使不正确也能使用 wx.readydebug: false,appId: '',timestamp: 1,nonceStr: '',signature: '',jsApiList: []});wx.ready(function() {document.getElementById('bgmusic').play();});}// 方法2: "野生"方法, 借用原来老的 WeixinJSBridgefunction autoPlayAudio2() {window.onload = function() {// alert(typeof WeixinJSBridge);WeixinJSBridge.invoke('getNetworkType', {}, function(e) {// 在这里拿到 e.err_msg, 这里面就包含了所有的网络类型// alert(e.err_msg);document.getElementById('bgmusic').play();});};}// 大家或多或少都知道 iOS Safari 不允许自动播放 audio, 可能已经被坑过了,// 但微信内嵌的浏览器应该是做了一些定制化, 允许自动播放 audio.// 测试了以下机型在微信内嵌浏览器中仅需设置 audio autoplay 即可自动播放(audio)音乐, 无需特殊处理.// * iPhone5     iOS 7.0.6 WeChat 6.2// * iPhone5s    iOS 8.1.2 WeChat 6.3.7// * iPhone6Plus iOS 8.1.3 WeChat 6.3.7// * MI1S    Android 4.1.2 WeChat 6.3.7// // 但是当手机是 iPhone6s iOS 9.1 WeChat 6.3.7 时, 必须做如下特殊处理才能在微信中自动播放(audio)音乐,// 我可以推测是 iOS 9 的兼容性问题么?// autoPlayAudio1(); // 推荐使用方法1// autoPlayAudio2(); // 也可以试一试方法2</script>
</body>
</html>

解决苹果ios端微信无法自动播放H5页面背景音乐相关推荐

html引入优酷视频自动播放,h5页面上如何播放优酷视频
看到上面的答案,可能有人会有雾水.我来补充一下. 如果使用ueditor,kineditor等富文本编辑器插入的视频,其默认是插入swf结尾的url 这个时候,html5是不支持的. 那么如何做呢? ...
一种解决h5页面背景音乐不能自动播放的方案
一种解决h5页面背景音乐不能自动播放的方案场景:微信.浏览器.App 普通解决方案:采用audio标签的autoplay属性现象: 1.大部分IOS系统和少部分Android微信不支持自动播放解 ...
ios设置音乐audio自动播放
因为audio标签的自动播放:autoplay.在ios系统中不能自动播放,此时需要设置,在进入页面自动播放音乐. 第一步,先引入js微信 <script src="js/jweixi ...
WebView无法自动播放h5的video视频标签解决办法
由于项目需求,在进入webview时需要自动播放h5里的video视频,国内网上找了比较多方案都不行,最后还是在Google上找到了解决办法: stackoverflow 加入一行代码: webVie ...
HTML网站微信打开自动播放音乐JS
源码简介: HTML网站微信打开自动播放音乐JS,众所周知网站里面的bgm在微信是不能自动播放的,好像是因为浏览器内核限制禁止自动播放,具体也不清楚,经过我的测试这个代码确实可以修复微信不自动播放音乐 ...
js微信h5页面背景音乐
微信H5页面 <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF ...
微信公众号进入H5页面之后，点击返回键一直报404
微信公众号进入H5页面之后,点击返回键一直报404,遇到这个问题很郁闷呀! 注意:注意: 这是我自己的系统出的问题! 第一:因为这个问题不是所有手机上面都出现第二:这个问题不是一个手机在出问题第三 ...
微信小程序内含H5页面实现方式
微信小程序内含H5页面实现方式一.背景众所周知,我们写完小程序,发到线上,是需要经历设置版本.提交代码审核.等待审核等步骤,放一个版本下来可能花费很多的时间,甚至很可能等待了很长时间,审核未通过, ...
微信小程序嵌套h5页面怎么实现小程序支付
微信小程序嵌套h5页面怎么实现小程序支付小程序嵌套h5页面怎么实现小程序支付小程序中嵌套h5页面,但是不能再h5页面拉起小程序支付,这时是需要小程序方拉起支付目前的流程,外链发送订单请求拿到预支付 ...

解决苹果ios端微信无法自动播放H5页面背景音乐

解决苹果ios端微信无法自动播放H5页面背景音乐相关推荐

最新文章

热门文章