關於音頻自動播放的問題

之前工作中遇到的音頻文件在移動端不能自動播放的問題，后來發現在pc端初始頁面第一次加載頁面的時候（注意：是沒有緩沖的情況下），這個時候音頻也是無法自動播放的，會在控制台輸出錯誤：如圖

翻譯錯誤代碼：Uncaught (in promise) DOMException: play()失敗，因為用戶沒有首先與文檔交互。

也就是說音頻還沒有被加載

**以下是看了別人文章后的個人感悟，如果有錯誤的地方，請各位大神指教！**
如有更好的方法，歡迎留言！

問題代碼：

  html部分

  <audio src="img/myDream.m4a" preload="none" id="musicAudio"></audio>

  <!--

preload="none"是為了防止頁面還沒顯示出來就播放了音樂

-->

js部分

let  musbox=document.getElementById('musicAudio');//獲取到元素
musbox.play();//初始頁面沒有緩沖的時候，是無法出發play的，因為音頻文件此時還沒有，會報上面截圖的錯誤

musbox.oncanplay=function () { //當前音頻可以播放觸發的事件（資源可能沒有加載完成，隨播放隨加載）
//以下是 音頻可以播放后要做的事情
     musbox.play();//這個播放是為了下次有緩存的時候能夠播放
   playBtn.className='playBtn move';

}

解決代碼：

  setTimeout(function () {
   let bon=musbox.play();//獲取到的是一個promise

//promise擁有then和catch方法，成功的時候調用then，失敗的時候調用catch，這里在初始的時候沒有音頻文件，所以promise狀態是失敗的
//就直接可以在失敗的時候做下處理

 bon.catch(()=>{//調用catch
     if(musbox.paused){//這里musbox.paused為ture就證明不是播放的狀態，只要不是播放的狀態就調用play讓其播放
           musbox.play();
        }
     })
},1000);
musbox.oncanplay=function () { //因為上面已經播放，這里自然是已經觸發了能夠播放的事件
       musbox.play();
    playBtn.className='playBtn move';}

移動端中是禁止音頻自動播放的：

QQ中可以正常播放

微信中需要加代碼：

document.addEventListener("WeixinJSBridgeReady", function () {
   musbox.play();
}, false);