Created
December 3, 2015 03:55
-
-
Save ufologist/7c14837db642a6e916ce to your computer and use it in GitHub Desktop.
在 iOS 微信浏览器中自动播放 HTML5 audio(音乐) 的正确方式
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!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://www.w3school.com.cn/i/song.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 一下 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(); | |
| }); | |
| }; | |
| } | |
| // 大家或多或少都知道 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> |
方案1，nice！
亲身试验方案一,不错!
IT WORKS!
方案1，nice!
在 ios 10.3.2 safari 无效，在微信内嵌浏览器下有效
这个只是在微信中有效果吧，非微信纯safari浏览器有没有解决方案
方案1，it works
方案1，it works
方案一无效 方案二可以
IT WORKS!
另外、野方法已经失效了...
方法二失效了。只能调方案一了...不过还是很棒的；
刚刚使用了这个方案，ios 12.3.1 微信7.0.4有效
function audioAutoPlay(id) {
var audio = document.getElementById(id);
if (window.WeixinJSBridge) {
WeixinJSBridge.invoke('getNetworkType', {}, function (e) {
audio.play();
}, false);
} else {
document.addEventListener("WeixinJSBridgeReady", function () {
WeixinJSBridge.invoke('getNetworkType', {}, function (e) {
audio.play();
});
}, false);
}
audio.play();
return false;
}
audioAutoPlay('music');
刚刚使用了这个方案，ios 12.3.1 微信7.0.4有效
function audioAutoPlay(id) { var audio = document.getElementById(id); if (window.WeixinJSBridge) { WeixinJSBridge.invoke('getNetworkType', {}, function (e) { audio.play(); }, false); } else { document.addEventListener("WeixinJSBridgeReady", function () { WeixinJSBridge.invoke('getNetworkType', {}, function (e) { audio.play(); }); }, false); } audio.play(); return false; } audioAutoPlay('music');
请问一下用的jssdk是哪个版本的，我这边测试没用......
能给个测试demo.html 就最好了
7.0.8 版本， 方法二失效。。
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
使用方法2, 可行.
亲测可以把canplaythrough放在invoke里面
WeixinJSBridge.invoke('getNetworkType', {}, function(e) {
audio.addEventListener('canplaythrough', function() {
audio.play();
//do something
}, false);
});