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

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

关于 Uncaught (in promise) DOMException: The play() request was interrupted by a call to pause() 错误的更多相关文章

  1. Uncaught (in promise) DOMException: The play() request was interrupted by a call to pause().

    解决方法: audio.load() let playPromise = audio.play() if (playPromise !== undefined) { playPromise.then( ...

  2. chrome播放语音时,在chrome 控制台中报 DOMException: The play() request was interrupted by a call to pause(). 的问题.

    $(document).ready(function () { var audioElement = $( '<audio>' + ' <source src="" ...

  3. 音频播放时出现 Uncaught (in promise) DOMException: play() failed because the user didn't interact with the document first. https://goo.gl/xX8pDD

    <audio id="play" controls="controls" loop="loop"> <source src ...

  4. Uncaught (in promise) DOMException: play() failed because the user didn't interact with the document first.

    最近在开发一个网站时,有个需要是 如果有新预警信息要在网页中播放提示音.页面打开会请求是否有新信息,有则播放提示音.在Chrome的最新浏览器中,播放会报错,控制台显示Uncaught (in pro ...

  5. patchUpload.vue?5e29:406 Uncaught (in promise) DOMException: Failed to execute 'readAsArrayBuffer' on 'FileReader': The object is already busy reading Blobs.

    patchUpload.vue?5e29:406 Uncaught (in promise) DOMException: Failed to execute 'readAsArrayBuffer' o ...

  6. 填坑——audio不能正常播放,控制台报错 Uncaught (in promise) DOMException

    原文:https://blog.csdn.net/Mariosss/article/details/87861167 用chrome调试页面时,发现audio控件有时不能正常播放音频,控制台报错 Un ...

  7. 解决Chrome浏览器无法自动播放音频视频的问题,Uncaught (in promise) DOMException

    转载自:http://www.nooong.com/docs/chrome_video_autoplay.htm 在最新版的Chrome浏览器(以及所有以Chromium为内核的浏览器)中,已不再允许 ...

  8. vue 运行项目时,Uncaught (in promise) DOMException: Failed to execute 'open' on 'XMLHttpRequest': Invalid URL

    npm  run dev 运行项目后 验证码显示不出来 并报错 Uncaught (in promise) DOMException: Failed to execute 'open' on 'XML ...

  9. 网页视频不能自动播放?HTML5 video报错Uncaught (in promise) DOMException解决方法

    话说发哥四年前写了一个网页,如上图效果,实际网址http://pano.z01.com ,话说做好时是正常的,突然某一天,客户说你这个网站动画不见了,这是什么原因? 结果检查脚本一切正常. 其实也不是 ...

随机推荐

  1. C--变量的命名规则

    规则1.标识符最好采用英文单词或其组合,不允许使用拼音. 规则3.当标识符由多个词组成时,每个词的第1个字母大写,其余全部小写: int   CurrentVal; 规则5.对在多个文件之间共同使用的 ...

  2. Java代理(jdk静态代理、动态代理和cglib动态代理)

    一.代理是Java常用的设计模式,代理类通过调用被代理类的相关方法,并对相关方法进行增强.加入一些非业务性代码,比如事务.日志.报警发邮件等操作. 二.jdk静态代理 1.业务接口 /** * 业务接 ...

  3. GetStoredProcCommand和GetSqlStringCommand的区别

    原文:http://www.ithao123.cn/content-4004602.html http://hi.baidu.com/847270942/blog/item/c224dd557ff74 ...

  4. thinkPHP-空操作

    空操作 当访问的方法不存在时,可以定义一个empty方法来避免空操作 function _empty() { echo "网页不存在,请检查地址信息"; } 这样当访问不存在的方法 ...

  5. Druid监控Mybatis不显示SQL问题

    一.Web.xml增加如下配置: 1.DruidWebStatFilter.如果没有配置filter信息.session监控,web监控等不可用.没有配置 <filter> <fil ...

  6. 动态设置和访问cxgrid列的Properties(转)

    原文:http://www.cnblogs.com/hnxxcxg/archive/2010/05/24/2940711.html 动态设置和访问cxgrid列的Properties 设置: cxGr ...

  7. MAC系统生成RSA公钥私钥

    进入openssl然后主要就是三条命令: 1.genrsa -out rsa_private_key.pem 1024 这句是生成原始私钥文件 2.pkcs8 -topk8 -inform PEM - ...

  8. 如何写一个简单的http服务器

    最近几天用C++写了一个简单的HTTP服务器,作为学习网络编程和Linux环境编程的练手项目,这篇文章记录我在写一个HTTP服务器过程中遇到的问题和学习到的知识. 服务器的源代码放在Github. H ...

  9. Acadia Lab 228 + Lab 222

    又是一对串烧实验,布好线后非常方便就可以一起完成. 连线方案一模一样: Lab 228 数码管骰子 核心代码如下: def loop() : global cnt global btn_read,se ...

  10. android 设置状态栏与标题背景颜色一致

    必须在Android4.4以上版本才能设置状态栏颜色: 一.在单个Activity里面,设置状态栏的背景: 效果: 1.在Activity的布局根文件中添加属性: android:fitsSystem ...