應用是運行在公眾號上的，一直在google瀏覽器調試，做播放audio時一開始出現了一個報錯

Uncaught (in promise) DOMException

百度搜了下是google瀏覽器的問題，就一時不著急沒處理他，后面這個問題提上了日程，真是整整浪費了一天時間來改這個問題！！！

先簡單說下一些我收集整理到的一些原因和處理方式，我也用過部分（如下）

部分瀏覽器、微信瀏覽器、ios自帶的瀏覽器不允許你自動播放audio，即使你通過生命周期代碼觸發play等事件都是不允許的，必須要你進行和瀏覽器進行事件互動，人為的點擊，觸摸等操作才能播放。經調研得知：最開始移動端瀏覽器是完全禁止音視頻自動播放的，考慮到了手機的帶寬以及對電池的消耗。但是后來又改了，因為瀏覽器廠商發現網頁開發人員可能會使用 其他替代方案，而播放性能消耗更為糟糕，所以這樣對用戶反而是不利的。因此瀏覽器廠商放開了對多媒體自動播放的限制，只要具備以下條件就能自動播放：

1，沒音頻軌道，或者設置了 muted 屬性
2，在視圖里面是可見的，要插入到 DOM 里面并且不是 display: none 或者 visibility: hidden 的，沒有滑出可視區域
換句話說，只要你不開聲音擾民，且對用戶可見，就讓你自動播放，不需要你去使用 GIF 的方法進行 hack。這種實現主要對于視頻的，自動播放但是卻是靜音的，需要你點擊喇叭才能有聲音，這對于音頻答題就跟沒說一樣。

后面我通過查找發現了一個能夠代替audio的，叫 AudioContext?但是！！！！雖然能代替，但是也有一些弊端，audiocontext需要用到文件流來實現播放，但是一些音頻文件為了防止被其他地方請求下載是不做跨域處理的，所以不同域名的不能跨域請求，再就是這個AudioContext是跟手機靜音有關系的，對比了下競品，抱著我們也不能比他們差的心態，果斷放棄了。

下面說一下繞了一圈坑后是如何填坑的：

抓了下競品的接口，他們他們首次加載的時候有一個.mp3的請求，我們模仿著這么做了，app-create的時候也播放了一個有效但沒聲音的MP3文件，后面再次無交互執行播放audio時竟然還無效，瞬間又陷入沉思。

因為自動播放是從a頁面到b頁面后b頁面請求接口成功后自動播放，我就想著在a頁面請求數據，把數據帶到b頁面，因為a頁面有點擊操作，在這個點擊操作中進行音頻播放，但是也無效，當時以為是vue路由的原因，后面證實也不是。

有時候這個思路就是會陷入一個死循環中，跳不出來，后面可能一下子開竅了，我直接把沒有聲音的播放操作移到了a頁面點擊處，之前的操作不變，這樣子就好了，其實好的莫名其妙！

而且我發現audio只要成功播放過一次，后面你不交互調用播放方法，也會自動播放，這也是讓我不明白的地方

?

?

總結

以上是生活随笔為你收集整理的html5-audio标签不能自动播放的坑！！！的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。