iOS 微信端背景音乐自动播放和控制

iOS 微信端背景音乐自动播放和控制

所有的应用都是有其对应的应用场景，没有最好只有适合。

---

背景

由于个人不太擅长css布局，也不喜欢。目的是要完成一些营销活动的H5页面，涉及到一些互动小游戏，音视频，动画等等。用css个人感觉略显麻烦，于是入坑Canvas解决方案。对比了几个h5游戏引擎，LayaAir支持As，Ts和Js三种方式开发，号称性能很好。于是直接上手。

遇到的第一个问题就是音频了，不是引擎本身的问题，iOS机制的问题，iOS设备浏览器只能在用户主动触发的的点击事件里才能播放，不然会被拦截，而且只要触发一次就行了。通过js各种模拟的点击事件都不行，必须用户主动点。

好在大部分的活动是基于微信客户端。只用考虑微信环境下。原生的Safari下还是没办法。

---

解决办法

原理都一样，通过微信的jssdk的事件，一定要考虑jssdk的引入的初始化是否完成

//页面上写一个id为bgm的audio标签
//方式一
try {
        window.WeixinJSBridge.invoke("getNetworkType", {}, bgmPlay);
    }catch (e) {
        bgmPlay();
    }
function bgmPlay(){
    $("#bgm")[0].play();
}

//方式二
wx.ready(function () {
        bgmPlay();
    });

其实LayaAir里面有音频的管理类laya.media.SoundManager，基于h5的web Audio Api。但是在使用它的话必须要等到引擎初始化完成才能调用，这里就会有个问题，那我必须要把jssdk的初始化放在引擎的初始化之后，这里就会有一个空挡时间，用户在这个时候分享就不会调用jssdk的自定义分享。

由于背景音乐只有一个而且可以通过标签的方式创建和获取，只用控制暂停和关闭，用原生的play和pause足够了，所以决定将背景音乐直接用原生js控制，游戏音效和一些同时多音频的播放交给引擎控制。