egret 篇——關於ios環境下微信瀏覽器的音頻自動播放問題

前段時間公司忽然想用egret（白鷺引擎）作一個金幣遊戲，大半個月邊看文檔邊寫吭哧吭哧也總算是弄完了。期間遇到一個問題，那就是ios環境下微信瀏覽器的音頻自動播放問題。

我的感受吧，egret本身封裝的audio仍是不太健壯。羣裏，社區呼聲一片，相信前端的不少人都碰到過這個問題。而網上隨便search一下答案很快就出來了。這裏就先copy一份答案吧。

   <script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></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

那麼在egret 中怎麼比較好的去實現打包h5以後，ios微信瀏覽器自動播放呢？這裏就參考了一下前端的方法，仍是貼代碼比較好解釋吧。
    1：在html模板中的body標籤前面添加一段js,注意是body前面；

                    function playsound(sound,loop){
                              if(sound == null){
                                    console.log('sound err')
                                    return;
                                }
                              var times = loop?0:1;
                             if(typeof WeixinJSBridge != 'undefined'){
                                    WeixinJSBridge.invoke('getNetworkType', {}, function (e) {
                                    return sound.play(0,times);
                                     });
                                 }else{
                                  return sound.play(0,times);
                                   }
                                 }

       原諒代碼的縮進有些噁心，粘貼過來的就這樣了。接下來，咱們怎麼在ts中調用呢？

                   class SoundMenager {
                             public constructor() {

                                       //加載資源
                                       this.loadMusic();
                                       if (SoundMenager.getIsSound()) {
                                       //靜音引導後播放能夠控制的背景音樂

                                               setTimeout(() => {this.nullAudio.addEventListener(egret.Event.COMPLETE, function loadOver(event:egret.Event) {window["playsound"](this.nullAudio, false)}, this);}}, 800);
                                            setTimeout(()=>{this._bgm.addEventListener(egret.Event.COMPLETE, function loadOver(event:egret.Event) {this.PlayBgMusic();}, this);},1000);
                                         }
                             }

                            public PlayBgMusic(){
                                       this._bgm_channel=this._bgm.play(0, -1);
                            }
                           //背景音樂開關
                           public StopBgmusic() {
                                      this._bgm_channel.stop();
                           }

                            //播放音樂
                             public PlayMusic(audio: egret.Sound, loop: Boolean = false, callback?: any) {
                                              let betGoldChannel: egret.SoundChannel;
                                             if (SoundMenager.getIsSound()) {
                                                        betGoldChannel =audio.play(0,1);
                                                         if (callback) {
                                                          betGoldChannel.addEventListener(egret.Event.SOUND_COMPLETE, () => { callback(); }, this);
                                                         }
                                              }else{
                                                    if(callback){
                                                                   callback();
                                                                  }
                                                      }
                                           }....

        首先在實例化SoundMenager的時候要先加載音樂。等待加載完畢後會先經過咱們前面在window環境在添加的一個方法window["playsound"]去播放一段靜音去觸發音頻播放。
        爲何不直接播放bgm呢，我發如今window["playsound"]中return出的一個egret.SoundChannel對象不可用,ts這邊是undefined。因此就先經過靜音觸發，再播放能夠控制的背景音樂。