页面无法自动播放音频的解决方案

问题描述：

最近在做一个客服电话平台（电话呼出呼入），因为里面使用了webRTC实现了软电话功能，所以现在电话呼入之后，页面弹出接听弹窗并且播放来电铃声，提醒用户接听。所以就使用了audio标签的play() 做自动播放（很久以前这么做过），但是没想到报错如下：

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

原因分析：

官方解释：最早是为了节约移动端的带宽和仿扰民（广告自动播放音频）阻止了自动播放，只有用户在页面上有交互动作后，才可以自动播放；

后来，紧接着在2018年4月份发布的Chrome 66也正式关掉了声音自动播放，也就是说<audio autopaly></audio> <video autoplay></video>在桌面版浏览器也将失效。

---

解决方案：

方法一：对应视频来说，把音视频加一个muted的属性（静音）就可以自动播放，这样会显示一个声音被关掉的按钮。

但是，如果只是一个音频的播放，如果背景音乐，或者我遇到的来电铃声这种情况，可以用一下方式处理：

方法二：在页面加载完成后，弹窗提示让用户点击可以自动播放音频

方法三：监听页面，判断页面交互了即有点击操作了之后自动播放

紧接着：在用户点击之后，将音频自动播放，并且静音，然后再需要的时候关掉/开启禁音即可！

参考文章：Chrome 66禁止声音自动播放之后

文章仅为本人学习过程的一个记录，仅供参考，如有问题，欢迎指出

对博客文章的参考，若原文章博主介意，请联系删除！请原谅