浏览器自动播放音频

html的video,audio标签有autoplay属性，autoplay 属性规定一旦音频就绪马上开始播放。如果设置了该属性，音频将自动播放。
但是，目前各主流浏览器为了用户体验，都禁止默认自动播放音视频了。需要有交互操作才能播放。没有交互操作，浏览器会报错，给出如下提示：

Uncaught (in promise) DOMException: play() failed because the user didn't interact with the document first.

网上提到的一些解决方法，比如window.open, iframe，AudioContext等方式都行不通了。必须得有交互操作。

为了更好的体验，我们可能想到最好让用户无感知。之前有想到用鼠标移动等事件去触发Audio的交互，从而达到后续通过js来操作播放。
监听网页的onmousemove事件，先把audio暂停，再通过js业务逻辑去操控音频的播放。
经过一番实践后，发现鼠标移动事件不行，得点击才醒。看来打擦边球行不通。

Chrome对video给了最佳实践方法，先默认静音，静音的视频文件是可以自动播放的，当用点击video控件上的音量开关后，就可以播放声音，后续也可以通过js去控制了。一些视频网站，APP也是这么做的。

处理音频的自动播放貌似也只能先让用户有点击操作了。我们可以监听网页的点击事件，不管用户点击了哪里，只要有点击操作，就可以控制audio，就能通过js去操作audio的播放暂停了。但这样也不靠谱，在业务需求下，某些情况下用户可能就是不做点击操作，那就无法播放音频了。

如果有前置条件能确保用户在页面上一定有交互操作，那我们可以在此入手，获取audio的播放控制权，让用户无感知操作就能自动播放音频了。如果不能保证，那只能再进一步，我们最终还得从交互上着手，给用户操作或提示界面，让用户主动去点击页面。

例如，在页面上展示一个静音按钮，提示用户当前音频是静音，暂停播放的，如果需要播放，需要点击播放按钮。

<audio id="player" controls src="./mp3/ding.mp3"></audio>
<script>
    let $player = document.getElementById('player');
    document.documentElement.onclick = function(){
        console.log(window.audioautoplay);

        if(!window.audioautoplay){
            window.audioautoplay = true;
            $player.play();
        }
    }

let No = '12345';
let audios = No.split('').map(v=>{
    return `./mp3/${v}.mp3`;
})

let index = 0;
function playOrder(){
    console.log(window.audioautoplay);
    
    $player.onended = ()=>{
        index += 1;
        if(index < audios.length){
            playOrder();
        }else{
            index = 0;
            audios = [];
        }
    }
    $player.src = audios[index];
    $player.play();
}

setTimeout(playOrder, 5000);

</script>