1. 程式人生 > >谷歌瀏覽器audio標籤自動播放音樂問題解決

谷歌瀏覽器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);

頁面初始化時載入方法,自動播放;至此問題成功解決,耗費了我好久的時間,

不過還好問題解決了,找了好久都沒有找到解決方法,還好測試成功,在此記下來!