关于设置浏览器自动播放音频 autoplay 浏览器默认阻止问题
Uncaught (in promise) DOMException: play() failed because the user didn't interact with the document first.
最近一位前端朋友遇到了一个问题，就是关于谷歌浏览器阻止自动播放音频的问题，即设置autoplay属性后无效。
之前也没有遇到过，后面就这个问题研究了一下。下面贴一下报错的截图
标签： autoplay
首先朋友问到我这个问题，我也没有遇到过，所以当即新建了一个html在谷歌浏览器中看了一下，果不如其然报了这个错误。然后我就去百度了一下，下面贴一下百度到的几篇文章。
百度出的解决方法
- csdn-起风了 解决的思路是添加muted 将音频静音之后在通过js设置paly 进行播放。（尝试了一下在谷歌浏览器里没有生效）
- csdn-温酒斟与你 解决的思路是需要用户手动点击过页面再进行播放（这个符合我们自动播放的问题，确实在调用play之前用户操作过页面之后，是不会报错的）
- 博客园-沫丶灬沫 解决思路是更改谷歌浏览器的一些设置（这个对于用户的体验来说确实不够友好）
后面我又查了一下谷歌的文档--（权威）考虑到可能有些朋友可能看不到这个链接，下面会大概讲述一下文章说的内容
这篇文章是讲自动播放政策变更的，谷歌于2018年4月更改自动播放，就是不让用了。给出的原因是Web浏览器正在朝着更严格的自动播放策略发展，以改善用户体验，最大程度地减少安装广告拦截器的动机，并减少昂贵和/或受限网络上的数据消耗。这些更改旨在更好地控制用户的播放，并使使用合法情况的发布者受益。
谷歌给出的允许自动播放的条件
- 始终允许静音自动播放。
- 在以下情况下，允许自动播放声音：
1、用户已与域进行了交互（单击，点击等）。
2、在台式机上，已经超过了用户的“媒体参与度索引”阈值，这意味着该用户以前曾播放带声音的视频。
3、用户已将该网站添加到他们在移动设备上的主屏幕，或者在桌面上 安装了PWA。 - 顶级框架可以将自动播放权限委派给其iframe，以允许自动播放声音。
给出解决的方法
开发人员开关
作为开发人员，您可能需要在本地更改Chrome自动播放策略的行为，以根据用户的参与度来测试您的网站。
-
您可以通过使用一个完全禁用自动播放策略内部开关 用chrome.exe --autoplay-policy=no-user-gesture-required。这样，您就可以像测试用户强烈参与您的网站一样测试您的网站，并且始终允许播放自动播放功能。
-
您还可以通过禁用MEI，将自动播放策略应用于Web音频以及总体MEI最高的站点是否默认为新用户播放自动播放，来确定禁止播放自动播放。这可以用三个完成内部开关用chrome.exe --disable-features=PreloadMediaEngagementData, MediaEngagementBypassAutoplayPolicies。
iframe委派
一个功能政策使开发人员可以选择性地启用和禁用的各种浏览器的功能和API。原点获得自动播放权限后，便可以使用新的自动播放功能策略将该权限委派给跨域iframe。请注意，默认情况下，同源同源iframe允许自动播放。
```
<!-- Autoplay is allowed. -->
<iframe src="https://cross-origin.com/myvideo.html" allow="autoplay">
<!-- Autoplay and Fullscreen are allowed. -->
<iframe src="https://cross-origin.com/myvideo.html" allow="autoplay; fullscreen">
```
禁用自动播放功能策略后，play()不带用户手势的调用将使用NotAllowedErrorDOMException拒绝诺言。并且autoplay属性也将被忽略。
Chrome企业政策
可以针对售货亭或无人值守的系统等用例，通过Chrome企业策略更改这种新的自动播放行为。请查看“ 策略列表”帮助页面，以了解如何设置这些与自动播放相关的新企业策略：
- 该“AutoplayAllowed”的策略控制自动播放是否允许。
- 该“AutoplayAllowlist”政策，允许您指定的URL模式的允许列表，其中自动播放将始终启用。
Web开发人员的最佳做法
```
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<audio id="bgMusic" controls autoplay loop
src="https://webfs.yun.kugou.com/202103042048/2b4e1bcbf20fc681fc0b79afd2c0cbce/G060/M09/00/11/HJQEAFbRRM-AVOSeADxTwivtZiI118.mp3"></audio>
</body>
<script>
var promise = document.querySelector('video').play();
if (promise !== undefined) {
promise.then(_ => {
// Autoplay started! 这种情况可以自动播放（非谷歌的其他浏览器：edge、360）
}).catch(error => {
// Autoplay was prevented.谷歌和火狐就会阻止播放，可以显示一个PLAY按钮提示用户点击后进行播放
});
}
</script>
</html>
```
如果我写得有不对的地方，还望各位指出纠正。
