媒介

或许许多前端遇到过这个需求：音讯提示。
一般来说，可以简朴的完成毫不会用庞杂的体式格局，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运转有题目，可以给我提个醒。