關於移動端audio自動播放問題

本人小白全棧一枚，給公司寫了一個監控中心，要求嚴重報警的時候需要觸發音頻播放，於是就有了以下的折騰。

 

剛開始一切都很順利，自然而然的寫了以下代碼。

<audio id="myaudio" >
    <source src="/static/warn.mp3" type="audio/mpeg">
</audio>

<script>
var tt;
function audioPlay(){
    document.getElementById("myaudio").play();
    tt = setTimeout(audioPlay, 5000);
}

function audioLoad(){
    document.getElementById("myaudio").pause();
}
</script>

// 觸發播放
audioPlay();

//清除定時任務
clearTimeout(tt);

　　

隨意在PC端測試了下，完美，然后我就沒管它了....直到有一天，一時興起拿起手機打開來看，結果發現沒聲音。PC端是正常的，沒理由手機不行，初步懷疑是瀏覽器音頻兼容性問題。

經過多方查證，居然是移動端做了限制，一定要用戶交互才能觸發，網上的解決方案大多是通過touchstart事件。

附上一個簡單的JS做參考

https://github.com/MauriceButler/simple-audio

 

至於最終的解決方案..因為我這邊只是內部使用，所以選擇了萬能的谷歌瀏覽器

chrome://flags/#disable-gesture-requirement-for-media-playback

開啟這個flags完美解決。