Skip to content

Instantly share code, notes, and snippets.

@ufologist
Created December 3, 2015 03:55
Show Gist options
  • Star 95 You must be signed in to star a gist
  • Fork 35 You must be signed in to fork a gist
  • Save ufologist/7c14837db642a6e916ce to your computer and use it in GitHub Desktop.
Save ufologist/7c14837db642a6e916ce to your computer and use it in GitHub Desktop.
在 iOS 微信浏览器中自动播放 HTML5 audio(音乐) 的正确方式
<!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>
@CheungZeeCn
Copy link

我这里没有遇到这个问题啊,safari一直可以自动播放。

@joecheng511
Copy link

IT WORKS!

@xugaibo
Copy link

xugaibo commented Mar 23, 2017

IT WORKS!

@yihuashub
Copy link

IT WORKS!

@c4cat
Copy link

c4cat commented Jul 4, 2017

使用方法2, 可行.
亲测可以把canplaythrough放在invoke里面
WeixinJSBridge.invoke('getNetworkType', {}, function(e) {
audio.addEventListener('canplaythrough', function() {
audio.play();
//do something
}, false);
});

@violinxliu
Copy link

方案1,nice!

@AdrianYeung
Copy link

亲身试验方案一,不错!

@Wangjiaji007
Copy link

IT WORKS!

@Zenfeder
Copy link

方案1,nice!

@cat-kun
Copy link

cat-kun commented Aug 29, 2017

ios 10.3.2 safari 无效,在微信内嵌浏览器下有效

@nokelong
Copy link

nokelong commented Nov 1, 2017

这个只是在微信中有效果吧,非微信纯safari浏览器有没有解决方案

@pobing
Copy link

pobing commented Dec 8, 2017

方案1,it works

@ningbonb
Copy link

方案1,it works

@vino24
Copy link

vino24 commented Apr 26, 2018

方案一无效 方案二可以

@zipeijun
Copy link

IT WORKS!
另外、野方法已经失效了...

@KattemChen
Copy link

方法二失效了。只能调方案一了...不过还是很棒的;

@NullYing
Copy link

刚刚使用了这个方案,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');

@leo-yi
Copy link

leo-yi commented Jun 26, 2019

刚刚使用了这个方案,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 就最好了

@xyhere2001
Copy link

7.0.8 版本, 方法二失效。。

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment