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实际上表现正常（至少部分正常）。 Web音频规范说...

新创建的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语句，则Safari仅会触发resume()事件。

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

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

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

Safari AudioContext已暂停，即使创建了onclick

1 个答案: