如何防止“播放（）请求被暂停（）调用中断”错误？

Question

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

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

但这会导致错误： The play() request was interrupted by a call to pause()

每次触发声音事件时都会在另一个触发之后立即出现。声音仍然可以正常播放，但我想防止此错误消息不断弹出。有任何想法吗？

原文由 Owen M 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

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

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

媒体.暂停（）

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

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

基于 这个很棒的 SO 答案，您可以通过以下方法检查视频是否正在（或没有）真正播放，因此您可以安全地触发 play() 而不会出现错误。

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

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

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

原文由 User 1058612 发布，翻译遵循 CC BY-SA 4.0 许可协议

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

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

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

原文由 Nebojsa Sapic 发布，翻译遵循 CC BY-SA 4.0 许可协议