Chrome浏览器，js控制audio出现 421错误 Uncaught (in promise) AbortError: The play() request was interrupted by a call to pause()

经测试，目前仅在Chrome中出现，其他IE、Firefox等浏览器中均为发现，因Chrome浏览器加载音频的方式不一样，

解决方法：

调用play()这个函数之前，调用load()这个函数就解决了

另一种方法：

最近在做项目的时候发现一个如题的控制台报错。

一看右侧的报错文件是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)<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)

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)