摘要：不同瀏覽器下的限制策略和方案的整理端瀏覽器的限制策略和應對方案使用在端測試的瀏覽器包括瀏覽器瀏覽器瀏覽器瀏覽器限制策略內容參考自年月份發布的正式關掉了聲音自動播放靜音自動播放總是允許的。

使用 Mac 在 PC 端測試的瀏覽器包括

Chrome 瀏覽器

Safari 瀏覽器

Firefox 瀏覽器

Chrome-限制策略

內容參考自

https://developers.google.com...

https://github.com/gnipbao/ib...

2018 年 4 月份發布的 Chrome 66 正式關掉了聲音自動播放

靜音自動播放總是允許的。

在下列情況下允許使用聲音自動播放：

用戶已經與域進行了交互（點擊，tap 等）。

在桌面上，用戶的媒體參與指數閾值(MEI)已被越過，這意味著用戶以前播放帶有聲音的視頻。

在移動設備上，用戶已將該網站添加到主屏幕。

頂部框架可以將自動播放權限授予其 iframe 以允許自動播放聲音。

MEI 是一個評估用戶對于當前站點的媒體參與程度的指數，它取決于

-   用戶在媒體上停留時間超過了 7 秒以上
-   音頻必須是展示出來，并且沒有靜音
-   與 video 之間有過交互
-   媒體的尺寸不小于 200x140.

Chrome-應對方案

1.不要假設視頻會播放，并且在視頻不是真正播放時不要顯示暫停按鈕。

2.根據 promise 結果，判斷當前媒體是否支持 autoplay

var promise = document.querySelector("video").play();

if (promise !== undefined) {
    promise
        .catch(error => {
            // Auto-play was prevented
            // Show a UI element to let the user manually start playback
        })
        .then(() => {
            // Auto-play started
        });
}

3.如果不支持，有 3 個選擇，

（1）靜音自動播放，

（2）或者選擇彈出 dialog 引導用戶產生一次交互，在 event 回調里調用 play()

（3）提高 Chrome 瀏覽器的 MEI 指數

Safari 的限制策略和應對方案

內容參考自
https://webkit.org/blog/7734/...

Safari 瀏覽器使用自動推理引擎來阻止絕大多數網站默認自動播放的媒體元素。

Safari11 允許用戶通過「此網站的設置」選項，讓用戶控制哪些網站可以自動播放音視頻

1.判斷當前媒體是否支持 autoplay

2.如果不支持，有 3 個選擇

靜音自動播放

引導用戶對瀏覽器設置為【允許自動播放】

彈出 dialog 引導用戶產生一次交互，在 event 回調里調用 play()

靜音自動播放例子：

彈出 dialog 引導用戶產生一次交互的例子：

引導用戶對瀏覽器設置為【允許自動播放】的例子：

個人測試的結果是 Firefox 瀏覽器支持 autoplay

使用 Android 手機測試的瀏覽器包括以下

Firefox / QQ 瀏覽器 / 釘釘

微信

Chrome

Safari

UC瀏覽器

其中 Firefox / QQ 瀏覽器 / 釘釘 使用 video autoplay 的表現良好

微信的限制策略和應對方案

微信上實現自動播放需要用到一個 API WeixinJSBridge

它是在微信內置瀏覽器中有一個內置的 JS 對象,這個內置的 JS 對象就是 WeixinJSBridge. WeixinJSBridge 并不是 WebView 一打開就有了，客戶端需要初始化這個對象，當這個對象準備好的時候，客戶端會拋出事件 "WeixinJSBridgeReady"。因此，在調用 WeixinJSBridge 相關 api 時，需要做好 WeixinJSBridge 存在與否的判斷.

//監聽 WeixinJSBridge 是否存在
if (
    typeof WeixinJSBridge == "object" &&
    typeof WeixinJSBridge.invoke == "function"
) {
    vedio.play();
} else {
    //監聽客戶端拋出事件"WeixinJSBridgeReady"
    if (document.addEventListener) {
        document.addEventListener(
            "WeixinJSBridgeReady",
            function() {
                vedio.play();
            },
            false
        );
    } else if (document.attachEvent) {
        document.attachEvent("WeixinJSBridgeReady", function() {
            vedio.play();
        });
        document.attachEvent("onWeixinJSBridgeReady", function() {
            vedio.play();
        });
    }
}

移動端 Chrome 的限制和解決方案

muted可以自動靜音播放

引導用戶做一次交互可以播放

MEI值高的網站，可以自動播放

移動端 Safari 的限制和解決方案

muted可以自動靜音播放

引導用戶做一次交互可以播放

引導用戶對瀏覽器設置為【允許自動播放】

移動端 UC瀏覽器 的限制和解決方案

靜音模式也無法自動播放

彈出dialog,引導用戶做一次交互可以播放

參考資料

https://segmentfault.com/a/11...

原生播放音頻除了使用audio標簽之外，還有另外一個API叫AudioContext，AudioContext接口表示由音頻模塊連接而成的音頻處理圖，每個模塊對應一個AudioNode。AudioContext可以控制它所包含的節點的創建，以及音頻處理、解碼操作的執行。做任何事情之前都要先創建AudioContext對象，因為一切都發生在這個環境之中。

AudioContext播放聲音

先請求音頻文件，放到ArrayBuffer里面，然后用AudioContext的API進行decode解碼，解碼完了再讓它去play。

function request (url) {
    return new Promise (resolve => {
        let xhr = new XMLHttpRequest();
        xhr.open("GET", url);
        // set response Type arraybuffer
        xhr.responseType = "arraybuffer";
        xhr.onreadystatechange = function () {
            if (xhr.readyState === 4 && xhr.status === 200) {
                resolve(xhr.response);
            }
        };
        xhr.send();
    });
}

實例化AudioContext

// Safari是使用webkit前綴
let context = new (window.AudioContext || window.webkitAudioContext)();

解碼播放

function play (context, decodeBuffer) {
    let source = context.createBufferSource();
    source.buffer = decodeBuffer;
    source.connect(context.destination);
    // 從0s開始播放
    source.start(0);
}
// 請求音頻數據
let audioMedia = await request(url);
// 進行decode和play
context.decodeAudioData(audioMedia, decode => play(context, decode));