谷歌瀏覽器audio標籤自動播放音樂問題解決
前面一篇部落格中有audio標籤自動播放音樂的程式碼,可是後來再開啟頁面時音樂自動播放報錯了;
看了網上的一些帖子才知道原來在4月份谷歌瀏覽器做了改革,不止谷歌,
其他瀏覽器好像也不支援自動播放了,現貼出解決方案:
1.在chrome 瀏覽器中輸入:chrome://flags,搜尋“Autoplay policy”,預設為“Default”,
修改為 “No user gesture is required” 就可以了;此方法僅限谷歌瀏覽器,而且比較笨拙,
但是問題可以解決;
2.在使用video標籤的過程中,設定靜音播放,問題也可以得到解決,但是對於有播放聲音
要求的同學來說,問題還是得不到解決,程式碼如下:
<video controls muted autoplay >
<source src="ifthisisthelove.mp3" type="video/mp4">
<source src="ifthisisthelove.ogg" type="video/ogg">
</video>
3.回到我使用的標籤audio,使用這個標籤自動播放時報錯:
Uncaught (in promise) DOMException: play() failed because the user didn't interact with the document first.
這時我們自動播放是不成功的,解決辦法如下:
function toggleSound() {
var music = document.getElementById("vd");//獲取ID
console.log(music);
console.log(music.paused);
if (music.paused) { //判讀是否播放
music.paused=false;
music.play(); //沒有就播放
}
}
setInterval("toggleSound()",1);
頁面初始化時載入方法,自動播放;至此問題成功解決,耗費了我好久的時間,
不過還好問題解決了,找了好久都沒有找到解決方法,還好測試成功,在此記下來!