即使创建了 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 在这种情况下实际上表现正确（至少部分）。网络音频规范说...

新创建的 AudioContext 将始终以挂起状态开始，并且每当状态更改为不同状态时都会触发状态更改事件。

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
}

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

但是，您可以尝试使用另一种 hack 方法来解决AudioContext. 只需创建一个简单的GainNode.

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

您还可以尝试标准化音频上下文，使所有浏览器在这方面的行为都相同。