關於 Uncaught (in promise) DOMException: The play() request was interrupted by a call to pause() 錯誤

最近在做項目的時候發現一個如題的控制台報錯。

一看右側的報錯文件是undefined

這下苦惱了，定位不到問題所在。

今天解決了這個問題，就來分享一下。

 

問題的關鍵所在是在執行了play()方法以后立即執行pause()方法。反之亦然

以下貼出代碼

HTML:

<button id="btn1">test</button>

JS:

var music=new Audio();
music.src="/1.mp3";//這里替換成一個有效的音頻文件地址以方便測試
music.loop=true;
var playStatus=false;

function playOrPause(){
if(playStatus){
music.pause();
}else{
music.play();
}
playStatus=!playStatus;
}

for(var i=0;i<10;i++){
document.querySelector("#btn1").click();
}

標紅處的代碼是連續點擊10下#btn1  亦即連續快速執行10次playOrPause() 會出現圖1的報錯情況（當然 連續2下就會出錯）

當然，我們可以設置一個保護性延時

如下

var music=new Audio();
music.src="/1.mp3";
music.loop=true;
var playStatus=false;
var lastRunTime=Date.now();
function playOrPause(){
var currentTime=Date.now();
var protectTime=100;//設置保護性延時 單位毫秒，不要小於50 建議100以上
if((currentTime-lastRunTime)&lt;protectTime){
return;//兩次執行太過頻繁，直接退出
}

if(playStatus){
music.pause();
}else{
music.play();
}
playStatus=!playStatus;
lastRunTime=Date.now();
}

for(var i=0;i<10;i++){

document.querySelector("#btn1").click();

}

 

但是，這樣就違背了我們想模擬連按10下的初衷

所以可以用這種方法

var music=new Audio();
music.src="/1.mp3";
music.loop=true;
var playStatus=false;
var lastRunTime=Date.now();
function playOrPause(){
    var currentTime=Date.now();
    var protectTime=100;//設置保護性延時 單位毫秒，不要小於50 建議100以上
    if((currentTime-lastRunTime)<protectTime){
        return;//兩次執行太過頻繁，直接退出
    }
    
    if(playStatus){
        music.pause();
    }else{
        music.play();
    }
    playStatus=!playStatus;
    lastRunTime=Date.now();
}
var counter=10;//要連點的次數
var timer=setInterval(function(){
    if(counter>0){
        document.querySelector("#btn1").click();
    }else{
        clearInterval(timer);
    }
    counter--;
},500)