即使创建了 onclick，Safari AudioContext 也会暂停

Question

我在使用 Safari（桌面和移动设备）创建 AudioContext 时遇到问题。似乎即使在用户交互时创建，它仍然处于暂停状态。

我的代码：

<button onclick="test()">Test</button>

const test = () => {
    window.AudioContext = window.AudioContext || window.webkitAudioContext;
    audioContext = new AudioContext();
    console.log(audioContext.state); // Suspended
}

这应该是一个最低限度的工作示例，对吧？这里有什么问题？

Answer 1

我认为 Safari 在这种情况下实际上表现正确（至少部分正确）。网络音频规范说 ...

A newly-created AudioContext will always begin in the suspended state, and a state change event will be fired whenever the state changes to a different state.

https://webaudio.github.io/web-audio-api/#dom-baseaudiocontext-onstatechange

遗憾的是，Safari 不会自行转换到 running 状态。您必须明确要求它这样做。

audioContext.resume();
audioContext.onstatechange = () => console.log(audioContext.state);

statechange 事件应该几乎立即触发。如果您在点击处理程序中执行此操作。

上面的函数看起来像这样：

const test = () => {
    window.AudioContext = window.AudioContext || window.webkitAudioContext;
    audioContext = new AudioContext();
    console.log(audioContext.state); //suspended
    audioContext.resume();
    audioContext.onstatechange = () => console.log(audioContext.state); // running
}

有趣的是，如果您在调用 resume().

之前保留 console.log 语句，Safari 只会触发 statechange 事件

然而，您可以尝试使用 AudioContext 的另一种技巧。只需创建一个简单的 GainNode.

const test = () => {
    window.AudioContext = window.AudioContext || window.webkitAudioContext;
    audioContext = new AudioContext();
    audioContext.createGain();
    console.log(audioContext.state); // running
}

您也可以 standardized-audio-context 尝试一下，所有浏览器在这方面的行为都相同。

即使创建了 onclick，Safari AudioContext 也会暂停

Safari AudioContext suspended even with onclick creation

safari

mobile-safari

webkitaudiocontext

audiocontext

web-audio-api