关于 Uncaught (in promise) DOMException: The play() request was interrupted by a call to pause() 错误

发布时间:2017-5-30 21:11:32 编辑:www.fx114.net 分享查询网我要评论
本篇文章主要介绍了"关于 Uncaught (in promise) DOMException: The play() request was interrupted by a call to pause() 错误 ",主要涉及到关于 Uncaught (in promise) DOMException: The play() request was interrupted by a call to pause() 错误 方面的内容,对于关于 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)

上一篇:[转]Nodejs基础中间件Connect
下一篇:源码学习 系列

相关文章

相关评论

本站评论功能暂时取消,后续此功能例行通知。

一、不得利用本站危害国家安全、泄露国家秘密,不得侵犯国家社会集体的和公民的合法权益,不得利用本站制作、复制和传播不法有害信息!

二、互相尊重,对自己的言论和行为负责。