直接上代码,已测试测试可用
<!DOCTYPE html> <html> <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></audio> <!-- 当使用方法1时必须加载 JS-SDK 的 JS 文件, 方法2不需要加载这个 JS --> <script src="http://res.wx.qq.com/open/js/jweixin-1.4.0.js"></script> <script> // 方法1: 现在微信官方已经推出了微信JS-SDK, 最好还是不要使用"野生"方式, 因为不知道什么时候就可以不能用了! // 通过config接口注入权限验证配置后, 在 ready 中 play 一下 audio function autoPlayAudio1() { wx.config({ // 配置信息, 即使不正确也能使用 wx.ready debug: false, appId: '', timestamp: 1, nonceStr: '', signature: '', jsApiList: [] }); wx.ready(function() { document.getElementById('bgmusic').play(); }); } // 方法2: "野生"方法, 借用原来老的 WeixinJSBridge function autoPlayAudio2() { window.onload = function() { // alert(typeof WeixinJSBridge); WeixinJSBridge.invoke('getNetworkType', {}, function(e) { // 在这里拿到 e.err_msg, 这里面就包含了所有的网络类型 // alert(e.err_msg); document.getElementById('bgmusic').play(); }); }; } autoPlayAudio1(); // 推荐使用方法1 // autoPlayAudio2(); // 如果1不行也可以试一试方法2 </script> </body> </html>