如何防止“play（）请求被调用pause（）打断”错误？

javascript html google-chrome audio

2022-08-30 04:19:49

我做了一个网站，如果用户点击，它就会播放声音。为了防止声音重叠，我不得不添加代码：

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

但这会导致错误：
每次在另一个触发器之后触发声音事件时，都会出现错误。声音仍然播放正常，但我想防止此错误消息不断弹出。有什么想法吗？The play() request was interrupted by a call to pause()

答案 1

我最近也遇到过这个问题 - 这可能是和之间的争用条件。看起来有对这个问题的引用，或者与此处相关的内容。play()pause()

正如@Patrick指出的那样，它不会返回承诺（或任何东西），因此上述解决方案将不起作用。虽然 MDN 在媒体元素的 WC3 草案中没有关于的文档，但它说：pausepause()

media.pause（）

将暂停属性设置为 true，并在必要时加载媒体资源。

因此，还可以在超时回调中检查属性。paused

基于这个出色的SO答案，这里有一种方法可以检查视频是否（或没有）真正播放，因此您可以安全地触发play（）而不会出现错误。

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

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

否则，@Patrick 的答案应该有效。

答案 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
async function playVid() {      
    if (video.paused && !isPlaying) {
        return video.play();
    }
} 

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

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