如何防止"play()请求被暂停()调用中断"错误？

Question

我创建了一个网站,如果用户点击,它会发出声音.为了防止声音重叠,我不得不添加代码:

n.pause();
n.currentTime = 0;
n.play();

但这会导致错误: The play() request was interrupted by a call to pause()
每次在另一次触发后立即触发声音事件时出现.声音仍然很好,但我想防止这个错误信息不断弹出.有任何想法吗？

提前致谢!

Answer 1

我最近也遇到过这个问题 - 这可能是play()和之间的竞争条件pause().看起来有这个问题的参考,或者这里有相关的东西.

正如@Patrick指出的那样,pause不会返回一个承诺(或任何东西),因此上述解决方案将无效.虽然MDN没有关于Media Elementspause()的WC3草案的文档,但它说:

media.pause()

将paused属性设置为true,必要时加载媒体资源.

因此,人们也可以paused在超时回调中检查属性.

基于这个伟大的SO答案,这里有一种方法可以检查视频是否(或不是)正在播放,因此您可以安全地触发播放()而不会出现错误.

var isPlaying = video.currentTime > 0 && !video.paused && !video.ended 
    && video.readyState > 2;

if (!isPlaying) {
  video.play();
}

否则,@帕特里克的回答应该有效.

Answer 2

经过几个小时的搜索和工作,我找到了完美的解决方案.

// Initializing values
var isPlaying = true;

// On video playing toggle values
video.onplaying = function() {
    isPlaying = true;
};

// On video pause toggle values
video.onpause = function() {
    isPlaying = false;
};

// Play video function
function playVid() {      
    if (video.paused && !isPlaying) {
        video.play();
    }
} 

// Pause video function
function pauseVid() {     
    if (!video.paused && isPlaying) {
        video.pause();
    }
}

之后,您可以尽可能快地切换播放/暂停,它将正常工作.

Answer 3

我遇到了这个问题,有一个案例我需要点击pause()然后播放()但是当使用pause()时那么()我得到了未定义.

我发现,如果我在暂停后开始播放150毫秒就解决了这个问题.(希望谷歌很快修复)

playerMP3.volume = 0;
playerMP3.pause();

//Avoid the Promise Error
setTimeout(function () {      
   playerMP3.play();
}, 150);

Answer 4

我刚刚在https://developers.google.com/web/updates/2017/06/play-request-was-interrupted上发表了一篇关于这个确切问题的文章，它告诉你到底发生了什么以及如何解决它。

Answer 5

试试吧

n.pause();
n.currentTime = 0;
var nopromise = {
   catch : new Function()
};
(n.play() || nopromise).catch(function(){}); ;