zoukankan      html  css  js  c++  java
  • 关于 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)
  • 相关阅读:
    机器学习算法最深刻的讲解,包含海量数据处理算法
    从海量数据中寻找出topK的最优算法代码
    转载:基于 Hive 的文件格式:RCFile 简介及其应用---推酷
    原创:自定义三叉树(二)--基于搜索推荐系统根据用户搜索频率(热搜)排序
    原创:协同过滤之ALS
    AT2705 Yes or No(组合数学)
    LUOGU P4609 [FJOI2016]建筑师(第一类斯特林数)
    BZOJ 4710: [Jsoi2011]分特产(容斥)
    51nod 1518 稳定多米诺覆盖(容斥+二项式反演+状压dp)
    BZOJ 3944: Sum(杜教筛)
  • 原文地址:https://www.cnblogs.com/zzsdream/p/6125223.html
Copyright © 2011-2022 走看看