chrome瀏覽器下audio自動播放的hack

前言

也許不少前端遇到過這個需求：消息提醒。
通常來講，能夠簡單的實現毫不會用複雜的方式，audio標籤提供了這個功能。
可是，新版的chrome瀏覽器禁止了js自動播放音頻的功能，見鬼了。

音頻播放

<audio src="../audio.mp3" id="myaudio" class="hide"></audio>
<script>
var audio = document.getElementById('myaudio');
audio.play();
</script>

這是最簡單的音頻播放腳本，可是在chrome下，拋出異常：Uncaught (in promise) DOMException，緣由是這種操做必須由用戶發起。固然，這不是特例，像F11全屏操做，瀏覽器也是禁止腳本操做的。
可是咱們有這個需求，怎麼破？

毫不屈服的腦洞

可否不操做play呢？
chrome不只禁止了腳本自動調用play，還禁止了audio的autoplay屬性。
可是，若是音頻是靜音狀態，autoplay屬性仍是能夠生效的。意思是，你能夠播放，可是不能干擾用戶的視聽。
這就給咱們提供了一個hack的方法：
默認開啓音頻的靜音播放，並且是循環播放，當咱們須要提醒用戶的時候，把聲音打開，播放時間設置爲0秒，播放完畢，關掉聲音，繼續循環。
是的，音頻一直在播放，可是用戶聽不見。只有咱們想讓用戶聽見的時候才能聽見，客觀上也能實現需求。

具體實現

<audio src="../audio.mp3" muted autoplay loop id="myaudio" style="display: none"></audio>
<script>
/*
* muted 靜音
* autoplay 自動播放
* loop 循環播放
*/
var audio = document.getElementById('myaudio');
var t1 = 3e3;//若是是輪詢，這個時間必須大於音頻的長度。若是是webscoket，應該設置一個狀態play，避免重複播放，以下：
var t2 = 2500;//音頻的長度，確保可以完整的播放給用戶
var play = false;
function run(){
    if(play){
        return false;
    }
    audio.currentTime = 0;//設置播放的音頻的起始時間
    audio.volume = 0.5;//設置音頻的聲音大小
    audio.muted = false;//關閉靜音狀態
    play = true;
    setTimeout(function(){
        play = false;
        audio.muted = true;//播放完畢，開啓靜音狀態
    },t2);
}
setInterval(function(){
    run();//僞裝在輪詢服務器，或者從websocket拉取數據
},t1);
</script>

結語

這個方法通過在chrome上的實測，能夠使用。
可是其餘瀏覽器未作測試，聽說有的瀏覽器，彷佛是IE不支持muted屬性，限於操做系統，沒作測試，若是在IE運行有問題，能夠給我提個醒。