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运行有问题，能够给我提个醒。