safari - 无法在 Safari 中恢复 AudioContext

Question

我遇到了调用 resume 的问题在 AudioContext尝试在 Safari 中播放音频时永远不会解决。我正在创建一个 AudioContext在页面加载时，它以挂起状态开始。

According to this chromium issue , 调用resume如果被浏览器的自动播放策略阻止，将无法解决。我有一个绑定(bind)到 <button> 的点击事件如果它被暂停，它将恢复上下文。这适用于 Firefox 和 Chrome，也适用于 Safari 如果 我更改了网站的自动播放设置。

以下是我通常会如何恢复上下文:

await context.resume();

对于 Safari，我尝试在不等待 promise 解决的情况下调用 resume，而是为 onstatechange 注册回调。 ，然后将其包裹在 Promise 中:

if (window.webkitAudioContext) {
    await new Promise((accept, reject) => {
        this.context.onstatechange = async () => {
            if ((await this.context.state) === "playing") {
                accept();
            } else {
                reject();
            }
         };

        this.context.resume();
    });
}

然而，什么都没有改变: Promise从不解决，这意味着上下文状态没有改变。

我错过了什么吗？

Answer 1

我终于设法在 Safari 上播放音频。

“修复”相当简单:我必须调用 resume在绑定(bind)到用于启动播放的元素的事件处理程序中。在我的场景中，我将 Redux 与 React 一起使用，因此会进行调度，并且稍后会在另一个组件中恢复上下文。我猜 Safari 并没有将此视为对用户交互事件的直接响应，因此它将上下文保持在暂停状态。