解決ios下的微信打開的頁面背景音樂沒法自動播放（轉載）

時間 2020-05-21

原文原文鏈接

前言javascript

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

解決方案html

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

1 <audio id="Jaudio" class="media-audio" src="bg.mp3" autoplay preload loop="loop"></audio >

正常來講，上面的寫法在安卓和大部分IOS機子的微信是能夠播放的（safari這裏就忽略討論），可是還有少部分不能正常播放。java

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

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

<audio id="Jaudio" class="media-audio" src="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');

可是還有個問題須要解決：微信

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

後語函數

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

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

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

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

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

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="format-detection" content="telephone=no"/>
<title>IOS微信</title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<script type="text/javascript">
//原來是在微信易信執行Ready以前，先註冊事件，因此放在全部請求的最前面
document.addEventListener("WeixinJSBridgeReady", function () {
    audioAutoPlay('Jaudio');//給個全局函數
}, false);
document.addEventListener('YixinJSBridgeReady', function() {
    audioAutoPlay('Jaudio');//給個全局函數
}, false);
</script>
<!-- 加載css放這裏 -->
</head>
<body>
  
<audio id="Jaudio" class="media-audio" src="http://game.163.com/weixin/gfxm3_gc/images/bg.mp3" preload loop="loop">
</audio>
  
<script>
function audioAutoPlay(id){//全局控制播放函數
    var audio = document.getElementById(id),
        play = function(){
            audio.play();
            document.removeEventListener("touchstart",play, false);
        };
    audio.play();
    document.addEventListener("touchstart",play, false);
}
 
var isAppInside=/micromessenger/i.test(navigator.userAgent.toLowerCase())||/yixin/i.test(navigator.userAgent.toLowerCase());
if(!isAppInside){//給非微信易信瀏覽器
  audioAutoPlay();
}
</script>
</body>
</html>

轉載出處：w3cmark (http://www.w3cmark.com/2016/434.html)