在 Safari 中实现一个 AudioWorklet

Question

我一直在探索此处列出的一些示例： Google Chrome Labs - Audio Worklet 。 他们帮助我实现了我自己的基于 WASM 的 AudioWorklet 的大部分方法。 我很快注意到 Safari 不支持Worklet.addModule() ？ 我在网上找不到任何替代方法来演示如何在没有addModule的情况下实现音频工作集，任何人都可以帮助我了解是否可以在没有这种方法的情况下在 Safari 中使用音频工作集？

Answer 1

我发现在 Chrome 中，你必须：

// wait for user interaction
const context = new AudioContext()
await context.audioWorklet.addModule('./worklet.js')
const worklet = new AudioWorkletNode(context, 'workletName')
worklet.connect(context.destination)

但是，在 Safari 中，如果我启用“控制台 > 媒体日志记录”，我会看到这失败了

BaseAudioContext::willBeginPlayback 返回 false，不处理用户手势或捕获

这似乎是由于用户交互和new AudioWorkletNode之间的await 。

如果我将 Safari 中的顺序更改为：

const context = new AudioContext()
await context.audioWorklet.addModule('./worklet.js')
// wait for user interaction
const worklet = new AudioWorkletNode(context, 'workletName')
worklet.connect(context.destination)

这有效，但现在在 Chrome (:) 中不起作用，它现在给出错误：

不允许启动 AudioContext。 它必须在页面上的用户手势后恢复（或创建）

也许启用“控制台 > 媒体日志记录”是 Safari 开发工具，看看这是否与您遇到的问题相同？

要使其在 Safari 和 Chrome 中均能正常工作，您可以在页面加载时创建 AudioContext，然后在用户交互后调用 resume：

const context = new AudioContext()
await context.audioWorklet.addModule('./worklet.js')
// wait for user interaction
await context.resume();
const worklet = new AudioWorkletNode(context, 'workletName')
worklet.connect(context.destination)

Answer 2

我不确定为什么它对您不起作用，但最新版本的 Safari 支持AudioWorklet （有一些错误）。 它不适用于通过 http 提供的页面。 但它应该适用于通过 https 提供的页面。 也许这就是问题所在。

如果您想支持较旧的浏览器（尚不支持AudioWorklet ），您可以尝试来自 javascriptmusic 项目的standardized-audio-context或jariseon/audioworklet-polyfill或GoogleChromeLabs/audioworklet-polyfill或audioworkletpolyfill.js 。