一.问题重述

有的公众号消息点进去之后能够自动播放音乐，不需要用户手动触发再play，这是怎么实现的？

二.方案尝试

1.audio设置autoplay属性播放

给audio标签设置autoplay="autoplay"

结果：在某些Android机上可以自动播放，IOS不支持

2.setTimeout播放

进入页面后延迟执行audio.play()

结果：Safari，IOS微信不支持

3.按钮播放

通过点击按钮或者touch事件触发播放

结果：某些Android微信不支持

4.用旧微信API回调播放

通过获取网络状态的接口回调播放(无论成功失败，都执行play)

var audio = document.getElementById('audio');

if (window.WeixinJSBridge) {

WeixinJSBridge.invoke('getNetworkType', {}, function(e) {

audio.play();

}, false);

}else{

document.addEventListener("WeixinJSBridgeReady", function() {

WeixinJSBridge.invoke('getNetworkType', {}, function(e) {

audio.play();

});

}, false);

}

结果：IOS 微信不支持，Safari不支持(未做兼容性处理)

5.用新微信API回调播放

原理同上，只是用了新的微信API，详细信息请查看微信JS-SDK说明文档

var audio = document.getElementById('audio');

if (window.WeixinJSBridge) {

wx.getNetworkType({

success: function (res) {

audio.play();

},

fail: function (res) {

audio.play();

}

});

}else{

document.addEventListener("WeixinJSBridgeReady", function() {

wx.getNetworkType({

success: function (res) {

audio.play();

},

fail: function (res) {

audio.play();

}

});

}, false);

}

结果：IOS支持性未知

6.微信API回调用AudioAPI播放

AudioAPI无法打破IOS系统不让自动下载音频的限制(具体见后文)，所以尝试在回调中用AudioAPI播放音频

注意：低版本IOS不支持AudioAPI，Android支持性未知

// 获取AudioContext

window.context = getAudiocontext();

// 获取音频数据

window.source = null;

window.bufs = [];

// 执行

getBufs();

/**

* 获取AudioContext

* @return {AudioContext} andio元素相关的环境对象

*/

function getAudiocontext() {

window.AudioContext = (window.AudioContext || window.webkitAudioContext);

if(window.AudioContext) {

return new window.AudioContext();

} else {

console.log('not support web audio api');

}

}

/**

* 播放

* @param {Integer} 1: 多个source直接连接输出设备 2: 多个source通过GainNode再连接输出设备

* @return nth

*/

function getBufs() {

var audioURL = 'didi.mp3'; // 这里替换为音频文件URL

var xhr1 = new XMLHttpRequest();

xhr1.open('GET', audioURL, true);

xhr1.responseType = 'arraybuffer'; // XMLHttpRequest 2的新东西

xhr1.onload = function() {

// 音频数据在xhr.response中，而不是xhr.requestText

bufs.push(xhr1.response);

}

xhr1.send();

}

//

// 微信回调 //

//

var audio = document.getElementById('audio');

function runNow() {

context.decodeAudioData(bufs[0], function(buffer) {

source = context.createBufferSource();

source.buffer = buffer;

// 源直接连接到输出设备

source.connect(context.destination);

source.start(0);

});

}

if (window.WeixinJSBridge) {

WeixinJSBridge.invoke('getNetworkType', {}, function(e) {

setTimeout(runNow, 3000);

}, false);

}else{

document.addEventListener("WeixinJSBridgeReady", function() {

WeixinJSBridge.invoke('getNetworkType', {}, function(e) {

setTimeout(runNow, 3000);

});

}, false);

}

结果：iPhnoe5不支持，6p未知，能触发回调，但play代码无效

7.其他可能能实现的方法

模拟事件触发(trigger)

手动触发事件，在事件处理器中播放音频，未经测试

新API

官方公开的1.0.0版本API不支持播放音频(仅仅支持播放录音)，后续可能会开放更多音频API，当然，都是后话

三.解决方案

没有完美兼容的解决方案，经测试，iPhone 5S及6上可以用JS API回调方式播放，Android自动播放比较容易，但某些深度定制机型仍然无法播放

自动播放的难点主要来自IOS，因为IOS系统限制不能自动下载音频视频，必须由用户动作触发播放：

In Safari on iOS (for all devices, including iPad), where the user may be on a cellular network and be charged per data unit, preload and autoplay are disabled. No data is loaded until the user initiates it. This means the JavaScript play() and load() methods are also inactive until the user initiates playback, unless the play() or load() method is triggered by user action. In other words, a user-initiated Play button works, but an onLoad=”play()” event does not.

还看到一种解决方案：

if ("wView" in window) {

window.wView.allowsInlineMediaPlayback = "YES";

window.wView.mediaPlaybackRequiresUserAction = "NO";

}

据说添加上面代码之后，直接preload、autoplay就可以了

注意：未经测试，效果未知

四.DEMO

参考资料