關於設定瀏覽器自動播放音訊 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>
如果我寫得有不對的地方，還望各位指出糾正。