关于H5页面背景音乐播放的问题

起因：这是一个嵌入到APP里的H5页面，都是一些相册集模板，用户添加照片，放到模板里，可以生成记忆链，然后进行播放。但是由于APP都是去调用自带的浏览器，以及安卓去调用自己生成的浏览器，导致了页面在iOS以及部分安卓上面无法自动播放背景音乐。

一开始接到这个任务的时候感觉没啥，因为这个东西在以前的时候就做过，每太在意，但是这次突然发现不行了，在本地测试的时候iOS不能播放，安卓倒是没问题，到了实体机测试的时候就完蛋了，全军覆没，所以就要去找问题原因以及解决方案。

首先我想到的是，是不是标签问题，以及兼容性等问题，所以我就写了一段js去判定当前音乐是否播放，没有的话就开始播放，这里贴出代码：

$(function(){

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

media.src = "bgm/See You Again.mp3";

media.play();

var flag = true;

$('#music').click(function(){

if(flag == true){

$(this).removeClass('on').addClass('off');

flag = false;

$('#audio').get(0).pause();

}else{

$(this).removeClass('off').addClass('on');

flag = true;

$('#audio').get(0).play();

}

})

})

这里用media.src = "bgm/See You Again.mp3";强制注入路径，是因为iOS对静态标签src这个标签的支持并不是很友好，然后后面就进行了判定，结果发现，部分安卓的问题解决了，但是在iOS上依旧不行。

这时候就尝试着换一下思路试试，为什么产生这种问题，以前就可以，现在怎么不行了。然后第一个想到的就是iOS的版本问题，然后就去网上看了一下，果然是，从iOS9之后就出现这个问题了，也包括安卓的不断升级，为了节省用户的流量，安卓跟ios都默认不允许开发者进行自动播放，除非用户进行页面操作，这也就是说，说白了就是想要播放，就要怼一下这个页面，点击啦，滑动什么的。

但是我偏偏不信，所以就尝试着各种方法，一个是延时播放，就是加一个定时器，1秒或者零点几秒后播放，结果失败，这里就不贴出代码了。第二个就是模拟点击事件，在加载页面的时候，模拟一个click（），结果同上T_T。后面我又尝试了事件绑定等等，结果都不行，果然是干不过人家浏览器呀。

不过也是略有收获，就是在微信浏览器里还是没问题的，那就是监听WeixinJSBridgeReady事件、DOMContentLoaded事件

微信的JS API建立在微信壳浏览器的内置JS对象WeixinJSBridge上，WeixinJSBridge并不是WebView一打开就有了，客户端需要初始化这个对象，当这个对象准备好的时候，客户端会抛出事件"WeixinJSBridgeReady"。

并且发现部分机型，监听DOMContentLoaded和load事件，在回调中也可以播放音乐；

所以，
3ff0
为了保险起见，可以同时监听两个事件，以增强其适用性。

这里贴出代码：

<audio id="car_audio" src="bgm/See You Again.mp3" ></audio>

document.addEventListener('DOMContentLoaded', function () {

function audioAutoPlay() {

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

audio.play();

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

audio.play();

}, false);

}

audioAutoPlay();

});

然后，又继续找了找，找到了第二种方案，这里也贴上代码：

<audio id="car_audio" src="bgm/See You Again.mp3" loop></audio>

document.getElementById('car_audio').play();

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

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

document.getElementById('car_audio').play();

});

}, false);

经测试证明，这两种方案完全可行，在微信浏览器里没有问题，在实体机测试，能兼容所有iOS设备以及安卓设备。

尽管这样还是没有满足在所有浏览器以及APP内部自动播放，客户还是不满意，必须要求自动播放。尽管我们心里明白，iOS那边必须要有一个强制事件才能触发，但是客户根本不去想这些。在解决问题的同时，也不断的去找一些大企业以及BAT这样的公司的页面，一是来佐证这个想法，二是可以看看人家怎么做的。事实证明，这个问题都存在，其实这个问题也不能算是bug，只是浏览器的一种保护机制。

最后我们想了一种方案，就是跟iOS以及安卓那边配合开发，由后台提供开始，暂停，播放方法，我们前端这边去传参数和调用，就是把音乐的链接，以及标签的ID，传给后台，后台返回方法名，然后去调用，经过好久的调试，终于能在APP里播放了，同时也证明这种方法是可行的。

最后的代码，因为牵扯的东西略多就不贴出来了，但是思路，以及过程就是这样。最后调页面的时候，由于用到了swipe，就出现了事件穿透这个问题，当时还懵了一下，就赶紧临时抱佛脚去学了一下，等之后可以分享一下。

如果有大神看到这个东西的话，有不对的地方请指出，非常感谢！