在 Angular 中使用音频工作集的实用方法是什么？

Question

我知道我们始终可以以本机方式加载音频工作集（通过使用

AudioContext.audioWorklet.addModule

），但它要求我们用纯 Javascript 编写它并自己处理依赖项捆绑。用 Angular 编写音频工作集是否更自然？ - 也就是说，我们最好可以用 Typescript 编写它，并让 Angular 为我们捆绑依赖项。

我看到 Angular 有 web worker 支持，但它们似乎并不完全相同。

Answer 1

我已经找到了解决此问题的方法。

1. 像 Web Worker 一样编写工作集。 Angular 完美支持这一点。现在的问题是，要加载已编译的工作脚本，我们没有一种简单的方法来获取其 URL。

2. 像这样包装工人代码：

if (typeof self !== "undefined") {
  postMessage(self.location.href);
} else {
  // do the worklet thing
}

当

self

不是

undefined

时，我们知道此脚本作为 Webworker 加载（在工作集上下文中它将是

undefined

）。在这种情况下，请通过

postMessage

发送脚本的位置。

3. 尝试加载工作集时，首先将其作为 Web Worker 加载，等待其报告位置，然后终止该 Worklet 并使用该位置加载工作集。

例如加载音频工作集：

// probe worker url
const worker = new Worker(
  new URL("path/to/the/worker", import.meta.url),
);

const url = await new Promise<string>((resolve, reject) => {
  worker.onmessage = (e) => {
    resolve(e.data);
    worker.terminate();
  };

  worker.onmessageerror = reject;
});

await audioContext.audioWorklet.addModule(url);

我还在 Angular 存储库上提交了功能请求，以获取工作集的内置支持。