js --自動播放音頻

  簡介

  基本使用

  chrome下無法自動播放問題處理

 

  簡介

  音頻的播放使用audio進行操作，可以有兩種方式處理（純js和html標簽+js）。

  audio是html5的新標簽，用於定義聲音

  audio的屬性（引用w3school）

屬性	值	描述
autoplay	autoplay	如果出現該屬性，則音頻在就緒后馬上播放。
controls	controls	如果出現該屬性，則向用戶顯示控件，比如播放按鈕。
loop	loop	如果出現該屬性，則每當音頻結束時重新開始播放。
muted	muted	規定視頻輸出應該被靜音。
preload	preload	如果出現該屬性，則音頻在頁面加載時進行加載，並預備播放。 如果使用 "autoplay"，則忽略該屬性。
src	url	要播放的音頻的 URL。

 

  基本使用

  ①html標簽 

<audio id="myaudio" src="exa.wav" autoplay="autoplay" controls="controls" loop="loop" 
preload="preload" muted="muted">
    不支持audio標簽
</audio>

<script type="text/javascript">
    document.getElementById("myaudio").play();
</script>

②js版本

<button onclick="voicePaly()">啟動</button>
<button onclick="voiceClose()">停止</button>

<script type="text/javascript">
     var audio;
     function voicePaly () {
         audio = "exa.wav";
         audio = new Audio(audio); 
         // 循環播放，播放結束繼續播放
         $(audio).unbind("ended").bind("ended", function(){
               audio.play();
         })
         audio.play();
     }
     function voiceClose () {
         audio.pause();
     }
</script>

 

  chrome下無法自動播放問題處理

  瀏覽器為了提高用戶體驗，減少數據消耗，chrome瀏覽器在18年4月起，就在桌面瀏覽器全面禁止了音視頻的自動播放功能，無用戶交互的情況下js調用play也被禁用，會直接拋出錯誤 “Uncaught (in promise) DOMException”

  關於無法自動播放的解決方案整理如下：

  更改瀏覽器設置，支持自動播放（分低版本和高版本兩種設置）

  》chrome地址欄輸入“chrome://flags/#autoplay-policy”，回車打開頁面

  》將“Autoplay policy” 更改為 “no user gestrue is required”，點擊頁面右下方的 “relaunch now”按鈕保存更改即可

 

 

  對於chrome 76.X版本沒有Autoplay選項，參考下列方式設置

  》如上，地址欄輸入“chrome://flags/#autoplay-policy” 並回車打開頁面

  》找到選項 “Touch Events API”，改為 “Automatic” 即可，保存設置

 

 

---

  參考資料：

  https://www.inqingdao.cn/5988.html

  https://blog.csdn.net/badmoonc/article/details/86529752