聲音沒法自動播放這個在IOS/Android上面一直是個慣例，桌面版的Safari在2017年的11版本也宣佈禁掉帶有聲音的多媒體自動播放功能，緊接着在2018年4月份發佈的Chrome 66也正式關掉了聲音自動播放，也就是說瀏覽器
<audio autopaly></audio> <video autoplay></video>
在桌面版瀏覽器也將失效。ide
最開始移動端瀏覽器是徹底禁止音視頻自動播放的，考慮到了手機的帶寬以及對電池的消耗。可是後來又改了，由於瀏覽器廠商發現網頁開發人員可能會使用GIF動態圖代替視頻實現自動播放，正如IOS文檔所說，使用GIF的帶寬流量是Video(h264)格式的12倍，而播放性能消耗是2倍，因此這樣對用戶反而是不利的。又或者是使用Canvas進行hack，如Android Chrome文檔提到。所以瀏覽器廠商放開了對多媒體自動播放的限制，只要具有如下條件就能自動播放：post
（1）沒音頻軌道，或者設置了muted屬性性能
（2）在視圖裏面是可見的，要插入到DOM裏面而且不是display: none或者visibility: hidden的，沒有滑出可視區域。url
換句話說，只要你不開聲音擾民，且對用戶可見，就讓你自動播放，不須要你去使用GIF的方法進行hack.桌面版的瀏覽器在近期也使用了這個策略spa
對於網頁開發人員來講，應當如何有效地規避這個風險呢？.net
Chrome的文檔給了一個最佳實踐：先把音視頻加一個muted的屬性就能夠自動播放，而後再顯示一個聲音被關掉的按鈕，提示用戶點一下打開聲音。對於視頻來講，確實能夠這樣處理，而對於音頻來講，不少人是監聽頁面點擊事件，只要點一次了就開始播放聲音，通常就是播放個背景音樂。可是若是對於有多個聲音資源的頁面來講如何自動播放多個聲音呢？code
首先，若是用戶還沒進行交互就調用播放聲音的API，Chrome會這麼提示：orm
DOMException: play() failed because the user didn't interact with the document first.視頻
Safari會這麼提示：
NotAllowedError: The request is not allowed by the user agent or the platform in the current context, possibly because the user denied permission.
Chrome報錯提示最爲友善，意思是說，用戶尚未交互，不能調play。用戶的交互包括哪些呢？包括用戶觸發的touchend, click, doubleclick或者是 keydown事件，在這些事件裏面就能調play.
因此上面提到不少人是監聽整個頁面的點擊事件進行播放，無論點的哪裏，只要點了就行，包括觸摸下滑。這種方法只適用於一個聲音資源，不適用多個聲音，多個聲音應該怎麼破呢？這裏並非說要和瀏覽器對着幹，「逆天而行」，咱們的目的仍是爲了提高用戶體驗，由於有些場景若是能自動播放確實比較好，如一些答題的場景，須要聽聲音進行答題，若是用戶在答題的過程當中能依次自動播放相應題目的聲音，確實比較方便。同時也是討論聲音播放的技術實現。
原生播放視頻應該就只能使用video標籤，而原生播放音頻除了使用audio標籤以外，還有另一個API叫AudioContext，它是可以用來控制聲音播放並帶了不少豐富的操控接口。調audio.play必須在點擊事件裏面響應，而使用AudioContext的區別在於只要用戶點過頁面任何一個地方以後就都能播放了。因此能夠用AudioContext取代audio標籤播放聲音。
對於移動端開發可考慮用原生AudioContext，使用參考：https://juejin.im/post/5af7129bf265da0b8262df4c
對於瀏覽器pc網頁能夠不用這麼麻煩，設置了muted屬性就能夠繞過去，解決方案就是默認先加上muted標籤，要播放的時候先關掉靜音，再調用play方法播放就能夠。