谷歌浏览器自动播放不生效问题

近几日在编码过程中发现谷歌浏览器中使用audio标签设置了autoplay但是无法自动播放mp3。
查询资料后发现“罪魁祸首”是谷歌浏览器的自动播放策略。
他们认为浏览器自动播放资源是一件特别消耗用户性能的事情，浏览器为了提高用户体验，减少数据消耗。所以在用户使用过程中需要用户手动对浏览器进行授权，允许播放。
audio标签自动播放:

 
<audio controls autoplay>
  <source src="https://mp3.haoge500.com/upload/128/2021/11/08/1234703.mp3" >
</audio>
    

运行后发现谷歌浏览器中audio标签并没有预期中的正常播放，仍然需要手动点击才可以进行播放 既然如此，就休怪我无情，于是我决定剑走偏锋，尝试使用 audio的标签 的play()方法实现，于是继续编码：

    let audio = document.querySelector('audio');
    audio.play();

然鹅，谢特~~ 我发现不仅也没有实现播放功能 甚至控制台还报了错,错误信息如下：DOMException: play() failed because the user didn't interact with the document first

这大概就是谷歌的那个播放策略搞的鬼，连通过JavaScript代码实现自动播放都被阻止了，呜呜呜。
心灰意冷的我决定剑再走偏锋。在页面创建了一个按钮标签 想通过点击事件实现播放。

    let audio = document.querySelector('audio');
    // audio.play();
    let btn = document.querySelector("button");
    let flag = false;
    btn.onclick =()=>{
        if(flag){
            audio.pause();
            flag = false
        }else{
            audio.play();
            flag = true
        }
    }

页面如下，点击“播放/暂停”按钮分别调用 audio的play方法 和pause方法 既然可以通过点击事件进行授权，那么可不可以使用其他事件呢 例如浏览器加载事件onload，鼠标移动事件onmousemove.当然结果是 不行 控制台又报了那个熟悉的错误：Uncaught (in promise) DOMException: play() failed because the user didn't interact with the document first 。
最后把点击事件写在body标签上，点击body执行play();完成了伪自动播放。（困难总比方法多）😅😅😅