關於微信下部分手機沒法播放背景音樂

本文的解決方案的核心是利用了 微信/易信 在ready的時候會有個 WeixinJSBridgeReady/YixinJSBridgeReady事件，經過監聽這個事件來觸發的。那有個坑就是 若是微信已經ready了，但還沒執行到你監聽這個ready事件的代碼，那麼你的監聽是沒用的，因此最理想的狀況是，監聽的js放在head前面(放在css外鏈以前)，確保最新執行，切記！切記！。

·另外一個坑就是，本文的解決方案只適合一開始就播放的背景音樂。若是你是作那種微信場景（打開頁面模擬收到不少條微信，每條微信都要播放那段音效），實際上本文的解決方案是不行的。由於ready的事件只會執行一次，即便你在ready事件裏面用setTimeout或者setInterval也可能會致使丟失狀況。

---

前言

在作各類HTML5場景頁面的時候，插入背景音樂是一個很廣泛的需求。咱們都知道，IOS下的safari是沒法自動播放音樂的，以致一直以來形成一種錯誤的認識，iso是沒法自動播放媒體資源的。直到微信火爆起來，咱們發現IOS的微信裏面打開的頁面卻能夠實現自動播放。這種狀況顛覆了我以前的認知。可是，可是。。。最近的項目，又發現了一個頭疼的問題。部分的IOS微信，打開有自動播放背景音樂的頁面沒有聲音！！最頭疼的是同款機子，相同的IOS系統，相同的微信版本！！沒錯，前端就是要常常這麼折騰的，同一個問題，你覺得找到了最終的解決方案，可是各類瀏覽器更新快速，昨天沒問題，也許今天就有問題了。還好，這個問題暫時找到緣由了，詳情請看下文。

解決方案

先看下平時使用audio標籤插入背景音樂的代碼：

<audio id="Jaudio" class="media-audio" src="http://game.163.com/weixin/gfxm3_gc/images/bg.mp3" autoplay preload loop="loop"></audio > 

正常來講，上面的寫法在安卓和大部分IOS機子的微信是能夠播放的（safari這裏就忽略討論），能夠掃一掃demo測試下你的手機：

若是上面的demo，你的ios微信能夠播放，說明你的是大部分正常的手機。若是不能播放，哈哈，你成爲了少部分不能正常播放的幸運者。。。

那代碼有辦法解決這少部分用戶呢？如何解決呢？

答案的關鍵就是微信的WeixinJSBridgeReady事件。這個是微信自帶提供的事件，測試發現，上面說的少部分的機子微信只要作微信ready後執行播放，就能夠用代碼實現自動播放功能了！具體代碼請看下面：

<audio id="Jaudio" class="media-audio" src="http://game.163.com/weixin/gfxm3_gc/images/bg.mp3" preload loop="loop"></audio > function audioAutoPlay(id){ var audio = document.getElementById(id); audio.play(); document.addEventListener("WeixinJSBridgeReady", function () { audio.play(); }, false); } audioAutoPlay('Jaudio'); 

剛纔若是你第一個demo不能播放的童鞋能夠再掃一掃測試下（若是第一個demo已經測試正常的，這個確定是正常的啦）

是否是聽到聲音了呢？！！解決方案就是這麼簡單。

後語

總結下吧，關於音樂自動播放的問題，如今能夠分爲三種：

1-支持audio的autoplay，大部分安卓機子的自帶瀏覽器和微信，大部分的IOS微信（無需特殊解決）

2-不支持audio的autoplay，部分的IOS微信（本文提供的解決方案）

3-不支持audio的autoplay，部分的安卓機子的自帶瀏覽器（好比小米，開始模仿safari）和所有的ios safari（這種只能作用戶觸屏時就觸發播放了）

那麼針對已知的三種狀況，關於自動播放背景音樂的問題，咱們來總結一下綜合解決方案代碼吧：

 

<audio id="Jaudio" class="media-audio" src="http://game.163.com/weixin/gfxm3_gc/images/bg.mp3" preload loop="loop"></audio > function audioAutoPlay(id){ var audio = document.getElementById(id), play = function(){ audio.play(); document.removeEventListener`請輸入代碼`("touchstart",play, false); }; audio.play(); document.addEventListener("WeixinJSBridgeReady", function () {//微信 play(); }, false); document.addEventListener('YixinJSBridgeReady', function() {//易信 play(); }, false); document.addEventListener("touchstart",play, false); } audioAutoPlay('Jaudio');