首页 > 其他好文 > 详细

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

时间：2016-12-02 13:44:05 阅读：2393 评论：0 收藏：0 [点我收藏+]

标签：控制台 ext 项目 script amp except prot 音频单位

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

技术分享

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

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

标签：控制台 ext 项目 script amp except prot 音频单位

原文地址：http://www.cnblogs.com/zzsdream/p/6125223.html

踩

(0)

赞

(0)

举报

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行

更多

友情链接

兰亭集智国之画百度统计站长统计阿里云 chrome插件新版天听网

关于我们 - 联系我们 - 留言反馈

© 2014 mamicode.com 版权所有联系我们:gaon5@hotmail.com

迷上了代码！