关于 Uncaught (in promise) DOMException: The play() request was interrupted by a call to pause() 错误
最近在做项目的时候发现一个如题的控制台报错。
一看右侧的报错文件是undefined
这下苦恼了,定位不到问题所在。
今天解决了这个问题,就来分享一下。
问题的关键所在是在执行了play()方法以后立即执行pause()方法。反之亦然
以下贴出代码
HTML:
JS:
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下就会出错)
当然,我们可以设置一个保护性延时
如下
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下的初衷
所以可以用这种方法
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() 错误的更多相关文章
- 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( ...
- chrome播放语音时,在chrome 控制台中报 DOMException: The play() request was interrupted by a call to pause(). 的问题.
$(document).ready(function () { var audioElement = $( '<audio>' + ' <source src="" ...
- 音频播放时出现 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 ...
- Uncaught (in promise) DOMException: play() failed because the user didn't interact with the document first.
最近在开发一个网站时,有个需要是 如果有新预警信息要在网页中播放提示音.页面打开会请求是否有新信息,有则播放提示音.在Chrome的最新浏览器中,播放会报错,控制台显示Uncaught (in pro ...
- 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 ...
- 填坑——audio不能正常播放,控制台报错 Uncaught (in promise) DOMException
原文:https://blog.csdn.net/Mariosss/article/details/87861167 用chrome调试页面时,发现audio控件有时不能正常播放音频,控制台报错 Un ...
- 解决Chrome浏览器无法自动播放音频视频的问题,Uncaught (in promise) DOMException
转载自:http://www.nooong.com/docs/chrome_video_autoplay.htm 在最新版的Chrome浏览器(以及所有以Chromium为内核的浏览器)中,已不再允许 ...
- 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 ...
- 网页视频不能自动播放?HTML5 video报错Uncaught (in promise) DOMException解决方法
话说发哥四年前写了一个网页,如上图效果,实际网址http://pano.z01.com ,话说做好时是正常的,突然某一天,客户说你这个网站动画不见了,这是什么原因? 结果检查脚本一切正常. 其实也不是 ...
随机推荐
- C--变量的命名规则
规则1.标识符最好采用英文单词或其组合,不允许使用拼音. 规则3.当标识符由多个词组成时,每个词的第1个字母大写,其余全部小写: int CurrentVal; 规则5.对在多个文件之间共同使用的 ...
- Java代理(jdk静态代理、动态代理和cglib动态代理)
一.代理是Java常用的设计模式,代理类通过调用被代理类的相关方法,并对相关方法进行增强.加入一些非业务性代码,比如事务.日志.报警发邮件等操作. 二.jdk静态代理 1.业务接口 /** * 业务接 ...
- GetStoredProcCommand和GetSqlStringCommand的区别
原文:http://www.ithao123.cn/content-4004602.html http://hi.baidu.com/847270942/blog/item/c224dd557ff74 ...
- thinkPHP-空操作
空操作 当访问的方法不存在时,可以定义一个empty方法来避免空操作 function _empty() { echo "网页不存在,请检查地址信息"; } 这样当访问不存在的方法 ...
- Druid监控Mybatis不显示SQL问题
一.Web.xml增加如下配置: 1.DruidWebStatFilter.如果没有配置filter信息.session监控,web监控等不可用.没有配置 <filter> <fil ...
- 动态设置和访问cxgrid列的Properties(转)
原文:http://www.cnblogs.com/hnxxcxg/archive/2010/05/24/2940711.html 动态设置和访问cxgrid列的Properties 设置: cxGr ...
- MAC系统生成RSA公钥私钥
进入openssl然后主要就是三条命令: 1.genrsa -out rsa_private_key.pem 1024 这句是生成原始私钥文件 2.pkcs8 -topk8 -inform PEM - ...
- 如何写一个简单的http服务器
最近几天用C++写了一个简单的HTTP服务器,作为学习网络编程和Linux环境编程的练手项目,这篇文章记录我在写一个HTTP服务器过程中遇到的问题和学习到的知识. 服务器的源代码放在Github. H ...
- Acadia Lab 228 + Lab 222
又是一对串烧实验,布好线后非常方便就可以一起完成. 连线方案一模一样: Lab 228 数码管骰子 核心代码如下: def loop() : global cnt global btn_read,se ...
- android 设置状态栏与标题背景颜色一致
必须在Android4.4以上版本才能设置状态栏颜色: 一.在单个Activity里面,设置状态栏的背景: 效果: 1.在Activity的布局根文件中添加属性: android:fitsSystem ...