衆所周知，chrome瀏覽器在18年4月起，就在桌面瀏覽器全面禁止了音視頻的自動播放功能。不光是這樣，在頁面加載完畢的情況下，用戶沒有click、dbclick、touch等主動交互行爲，使用js直接調用.play() 方法的話，chrome都會拋出如下錯誤：
直到用戶有交互之後，再次調用play()方法纔會正常播放。但是對於開發來說，很多情況下我們還是需要讓音頻自動播放的，比如實時消息通知，有最新消息的話，播放提示音，這種情況下我們該怎麼辦呢，經過查閱和自己的摸索，目前有以下三種辦法可以較好的解決這個問題，我們來看：
1、誘導用戶發起交互
我們可以在頁面加載完畢後，彈出一個獲取權限的通知，誘導用戶點擊。這樣，有了用戶的主動交互行爲，音視頻便可以正常播放了。
2、音視頻靜音播放
chrome允許音視頻在靜音的情況下自動播放。也就是說，假如給音視頻增加muted屬性，這種情況下chrome是允許自動播放的，對於視頻來說這種辦法也不失爲一種可行的方案。但是對於上邊我們提出的收到消息播放提示音通知這樣的需求，便無法滿足了。所以這種辦法並不能解決音頻的問題。代碼如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<audio autoplay="autoplay" src="http://data.huiyi8.com/2017/gha/03/17/1702.mp3" controls="controls" preload id="auto"></audio>
</body>
<script>
document.getElementById('auto').play()
</script>
</html>
靜音情況下，音頻正常播放，不會拋錯。（注意：autoplay屬性在chrome中無效）
3、通過iframe實現音視頻文件實現自動播放
有位外國友人寫的一篇文章中，提及到這種辦法，我們把音頻文件放入一個html文件，然後在我們需要使用的頁面中用iframe引入此頁面，這樣可以實現自動播放，但是經過我的多番測試發現，當前引入的頁面域名，不可以和iframe的src域名相等，不然的話會不太穩定，時而報錯，時而正常。例如：
假如我們現在有a.html和b.html兩個頁面，現在我們在本地起了localhost:3000的服務
localhost:3000/a可以訪問到a頁面，localhost:3000/b可以訪問到b頁面
a頁面：
<iframe allow="autoplay" src="http://localhost:3000/b.html"></iframe>
b頁面：
<audio autoplay="autoplay" src="http://data.huiyi8.com/2017/gha/03/17/1702.mp3" controls="controls" preload id="auto"></audio>
那麼此時，如果我們通過http://localhost:3000/a ，訪問a頁面則無法正常播放（時好時壞），但是a頁面如果改爲：
<iframe allow="autoplay" src="http://127.0.0.1:3000/b.html"></iframe>
這樣的話，正常播放不會有問題。總結下來就是，父窗口(即a頁面)使用域名訪問，那麼iframe引入b的話，就不可以使用同一個域名(使用ip或不同域名均可正常播放)。但是這樣做非常麻煩。
4、iframe直接引入音頻
我們可以通過如下這樣引入音頻:
<iframe allow="autoplay" src="http://data.huiyi8.com/2017/gha/03/17/1702.mp3"></iframe>
這樣iframe加載完畢就會自動播放音頻，不過他的缺點也很明顯，很多操作都沒辦法做。這樣的引入視頻，視頻只能播放一次就結束。想要他多次播放，則需要手動重置iframe的src來實現。
總結：
4種方式總結下來，3和4兩種通過iframe的方法都可以實現，但又各有優缺點，第三種雖然使用起來相對複雜一些，但是優勢在於我們可以利用js對視頻做相關操作。第四種引入方式簡單，但是對於可操作性幾乎沒有操作性可言。不過對於我要實現的消息通知的需求來說，第四種是最佳的實現方案。前兩種方案由於並不友好，就不過多說了。我們可以根據各自的使用場景來決定那種方案更合適。
參考鏈接：https://developers.google.com/web/updates/2017/09/autoplay-policy-changes