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>
```
如果我寫得有不對的地方，還望各位指出糾正。