问题标签 [audio-worklet]

我正在开发一个使用 AudioWorklet 来录制音频的网络应用程序。请参阅此处的示例： https ://engagelab.uio.no/oslospell/#/debug

我相信我清除了录音之间的所有缓冲区（主线程中的 this.audioData），但不知何故：在 Chrome/PC 上，新的录音片段总是从上一次录音结束后大约 0.5 秒的音频开始。此外，如前所述，最后 0.5 秒没有记录，而是在下一次记录开始时插入。这不会在 iPad 上的 Safari 上发生；在那里它按预期工作。

重现：

1. 转到https://engagelab.uio.no/oslospell/#/debug
2. 点击“开始音频”
3. 开始发出均匀的声音，点击“开始录音”，点击“停止录音”。
4. 点击“播放测试”。你应该听到声音。
5. 进行新的录音（“开始录音”，然后“停止录音”）。现在，当您单击“播放测试”时，您应该在新录音的前 0.5 秒内听到第一次录音的统一声音。录音也将停止有点太早了。

为什么会发生这种情况，我该如何解决这个问题？

供参考。我在 Safari/iPad 上的录音中遇到了延迟/不同步的大问题，但是在我实施断开/重新连接录音之间的音频图之后，问题完全解决了：

AudioWorkletProcessor 代码：

相关主线程代码（它是一个 Vue 应用程序）：

MediaDevices.getUserMedia在将 Chromium Audio 工作组与媒体流（麦克风）一起使用时，我注意到频繁且可重复的丢失。这不是 100% 可重现的，但是当它们确实发生时，它们确实倾向于遵循模式：

（每次尝试的时间范围略有不同）

1. 0:00 -> 0:00.2：没有收到样本。（能够重现 100% 的时间，但这感觉像是一个单独的问题，我现在不一定要追踪）
2. 0:00.2 -> 0:00.5 : 收到样本
3. 0:00.5 -> 0:00.6 ：发生丢失，没有收到样本（能够重现约 20% 的时间）。
4. 0:00.6 -> 0:30.0 : 收到样品
5. 从现在开始每隔 30 秒，偶尔会发生辍学。往往在前 30 岁时最常发生。（前 30 年代标记我也可以复制大约 20% 的时间）。

这是一个说明行为的代码笔： https ://codepen.io/GJStevenson/pen/GRErPbm

丢弃的样本在控制台中将如下所示：

关于问题可能是什么的任何想法？

编辑：运行 chrome://tracing 以捕获丢弃样本的跟踪。https://www.dropbox.com/s/veg1vgsg9nn03ty/trace_dropped-sample-trace.json.gz?dl=0。丢弃的样本发生在 ~.53s -> .61s

AudioWorkletProcessor.process由于根据https://developer.mozilla.org/en-US/docs/Web/API/AudioWorkletProcessor/process的调用是同步的，如果执行时间过长（例如超过 1 秒）会发生什么情况？在下一次通话中会跳过一些音频样本吗？或者样品会在某个地方排队吗？我找不到这方面的文档。

我想创建一个音频编辑器，您可以在其中将节点连接在一起以创建自定义音频组件。每次节点更改时，它们都会被编译成 javascript，然后由 a 运行new Function()以获得更好的性能。我刚刚读到有可能创建一个AudioWorklet在单独的线程上运行的 . 现在我想知道是否有可能将这两种想法结合起来，将我的算法AudioWorklet作为一串javascript代码传递给，然后使用new Function(codeString)构造函数内部将其放入函数中。然后 audioworklet 的process()函数将以某种方式调用自定义函数。

这在某种程度上是可能的，还是我要求太多？在我花费数小时试图让它工作之前，我想得到一个“是的，这是可能的”或“不，抱歉”......

谢谢你的帮助，

狗年

我的程序从运行时生成的代码创建了很多工作集。它们只使用很短的时间。有没有办法删除或注销旧的、未使用的工作集以重新获得内存？或者这是由 GC 自动完成的？

https://developer.mozilla.org/en-US/docs/Web/API/Worklet/addModule

目标是编写一个函数（根据用户请求触发），该函数返回一个表示麦克风音量（噪声）级别的特定数字，可以是分贝值，也可以是 1-100 范围内的值。

我做了研究，但没有找到我需要的东西。我发现最接近的是下面的代码，但问题是它因为“onaudioprocess”而不断运行。

由于它不会立即开始提供准确的数字，因此我考虑延迟几秒钟，然后将音量作为承诺返回并设置条件以停止该功能。由于某种原因不起作用，它在延迟时间过去之前仍然返回了一个不准确的值（来自前几个值）。

如果您推荐一个可以将以前的代码转换为我特别需要的代码或任何其他建议的修改（例如使用 AudioWorklet？），我们将不胜感激。

我一直在尝试使用 postMessage 从一个 AudioWorkletProcessor 中提取输入，然后将该输入插入另一个 AudioWorkletProcessor。

我设法将 Float32Array 放入第二个 AudioWorkletProcessor 处理方法，但 RingBuffer 似乎不起作用。

我不知道如何检测 process 方法内部的错误或与 RingBuffer 相关的任何错误。

我得到静音输出，控制台中没有错误。

我需要知道如何将提取的 Float32Array 传递给 ring-buffer-worklet-processor 输出。

先感谢您。

编辑：在我添加（ outputChannelCount: [2] ）到 ringBufferWorkletNode 选项后，我开始在输出中获取音频，但根本不清楚。

主线程：

音频处理器.js

ring-buffer-worklet-processor.js

来自主线程的 console.log 示例：

这是我关注的 GitHub：https ://github.com/GoogleChromeLabs/web-audio-samples/tree/main/audio-worklet/design-pattern/wasm-ring-buffer

目标 我是一个 JavaScript 库的作者，该库可以通过 AMD 或 ESM 在各种运行时环境（浏览器、Node.js、开发服务器）中使用。我的库需要使用它包含的文件生成 WebWorkers 和 AudioWorklets。该库检测它在哪个上下文中运行并为执行上下文设置所需的内容。

只要用户（我的库的用户 = 集成商）不将 WebPack 之类的捆绑程序带入游戏，这就可以正常工作。要生成 WebWorker 和 AudioWorklet，我需要包含我的库的文件的 URL，并且我需要确保调用我的库的全局初始化例程。

我希望尽可能多地在我的库中完成繁重的工作，而不是要求用户只为使用我的库进行非常专业的自定义设置。将这项工作交给他们通常会立即适得其反，人们会打开问题寻求帮助，将我的库集成到他们的项目中。

问题 1：我建议我的用户确保将我的库放入自己的块中。用户可以根据自己的设置来设置块，只要其他库不会对工作人员造成任何麻烦或副作用。尤其是像 React、Angular 和 Vue.js 这样的现代 Web 框架是这里典型的问题儿童，但人们也试图将我的库与 jQuery 和 Bootstrap 捆绑在一起。所有这些库在包含在 Workers/Worklets 中时都会导致运行时错误。

分块通常使用一些 WebPack 配置完成，例如：

mylib 现在有一个大问题：生成的绝对 URL 是什么，chunk-mylib.js因为它现在是我的库的准入口点，现在捆绑和代码拆分到位：

• document.currentScript通常指向某个入口点，例如 anapp.js而不是块。
• __webpack_public_path__指向用户在 webpack 配置中设置的任何内容。
• __webpack_get_script_filename__如果块名称已知，则可以使用，但我还没有找到一种方法来获取包含我的库的块的名称。
• import.meta.url指向我的图书馆file://原件的一些绝对网址。.mjs
• new URL(import.meta.url, import.meta.url)导致 WebPack 生成.mjs带有一些哈希的附加文件。这个额外的文件是不需要的，并且生成的文件还.mjs包含一些额外的代码，破坏了它在浏览器中的使用。

我已经在考虑创建一个自定义 WebPack 插件，它可以解析我的库包含的块，以便我可以在运行时使用它。我希望尽可能多地使用内置功能。

问题 2：假设问题 1 已解决，我现在可以使用正确的文件生成一个新的 WebWorker 和 AudioWorklet。但是由于我的库被包装到一个 WebPack 模块中，我的初始化代码将不会被执行。我的库只存在于一个“块”中，而不是一个entry，而且我不知道这种拆分将允许 mylib 在浏览器加载块后运行一些代码。

在这里，我很无知。也许块不是为此目的的正确拆分方式。也许需要一些其他设置我还不知道它可能吗？

也许这也可以通过自定义 WebPack 插件来完成。

问题的视觉表示：使用建议的分块规则，我们得到如块所示的输出。问题 1 是红色部分（如何获取此 URL），问题 2 是橙色部分（如何确保在后台 worker/worklet 启动时调用我的启动逻辑）

实际项目我想分享我的实际项目，以便更好地了解我的用例。我说的是我的项目alphaTab，一个音乐符号渲染和播放库。在浏览器 UI 线程 (app.js) 上，人们将组件集成到 UI 中，并获得一个 API 对象来与组件交互。一个 WebWorker 进行音乐表的布局和渲染，第二个 WebWorker 合成音频样本以供播放，AudioWorklet 将缓冲的样本发送到音频上下文进行播放。

目标：在没有用户交互的情况下在页面加载时显示带有 VU 表的 HTML 5 视频（没有音频到扬声器）。

我需要使用 AudioWorklet 来测量来自 HTML5 Video 对象的音频。

AIUI，除非设置了“静音”标志，否则视频不会自动播放（因为用户尚未与页面交互）。如果设置了“静音”，我的 AudioWorklet 真的会从 Video 对象接收样本吗？

很抱歉没有显示任何代码或实际尝试这个，但这里有一个陡峭的学习曲线，如果我会碰壁，我不愿意走这条路。

我正在用 vite 和 typescript 创建一个音频应用程序。我像这样导入了我的音频工作集：

它与开发服务器一起使用。但不适用于生产构建。被AudioMixerWorklet.ts复制到assest文件夹而不转换为Javascript！

我怎么解决这个问题？