问题标签 [audio-worklet]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票
1 回答
63 浏览

web-audio-api - Audioworklet 循环

我正在尝试创建一个 audioworklet 循环单个声音实例以创建一种持续效果。无论我循环输入多少个部分,我都会不断听到一种跳动的声音。一个实例有多少次对处理器的调用?

为了给你一个想法,这就是我到目前为止所拥有的:

所以我的想法是我在每个通道的 N 长度数组中捕获输入输入(在我的情况下有 2 个通道)。然后,一旦该数组已满,我会循环遍历该数组以填充输出,直到该节点被禁用。

0 投票
1 回答
436 浏览

typescript - 带有 Typescript 和 Audio Worklet 的 Vue

我在配置 Vue 以编译音频工作集时遇到问题。这基本上是这个问题,已经解决了,但是使用 Typescript 而不是 JavaScript。我的想法是放在解析文件ts-loader之前,这样工作集首先被编译成 JavaScript,然后工作集加载器可以解析它。由于某种原因,TypeScript 不会发出任何输出:worklet-loader*.worklet.ts

这是我的vue.config.js

目前,TypeScript 并不完全支持 Audio Worklets,这就是为什么我将建议的定义包含在我的项目中,以便 TypeScript 解析我的 worklet。

0 投票
1 回答
504 浏览

javascript - 选择用于录音的 web api

任务是基于标准的网络音频 api 实现一个录音机。仔细研究了两种方式ScriptProcessorNode.onaudioprocessAudioWorkletProcessor.process并没有做出最终决定。官方称 onaudioprocess 自 2014 年以来已被弃用,完全替代的是音频工作者。我是 javascript 新手,也许这个问题听起来很愚蠢,但为什么到今天还积极使用 onaudioprocess 呢?

让我们深入了解细节。AudioWorkletProcessor api 可供 73% 的用户使用,而onaudioprocess api 可供 93% 的用户使用。在接下来的 2 年中,我们可以希望增长 10%。(野生动物园用户)。有许多使用 onaudioprocess 的项目、文章、解决方案。甚至特定任务也可以简单地通过使用 onaudioprocess 来解决。AudioWorklet 不可能有这样的解决方案。AudioWorklet 文档很差,互联网上很少提及。例如,我仍然不明白为什么 WebWorker 知道 blob 是什么,而 AudioWorklet 却不知道(devTools exception: Uncaught ReferenceError: Blob is not defined)。在打字稿中,基本功能的声明类型有很长的开放案例. 这一切都给人一种onaudioprocess比AudioWorklet更活泼的印象。也许 AudioWorklet 更高效但难以实现,或者 javascript 社区不需要网络音频 api?解释一下我为什么要按照官方推荐选择AudioWorklet?

0 投票
1 回答
63 浏览

javascript - Webaudio:在响亮的同步声音后录制音频

我正在构建一个网络应用程序,它在听到响亮的同步噪音(如拍手声)后直接从麦克风录制音频。我正在寻找一种适用于桌面和安卓上的 chrome 的解决方案。

我尝试了以下方法

  1. 使用一个脚本处理器节点来监听麦克风并检测一个响亮的节点并在之后直接保存原始数据。

这种方法确实有效。但是由于节点在主线程中运行并丢帧,录制的音频很垃圾且有故障。

  1. 使用 audioWorklet 将音频处理放在不同的线程中,并使用端口将录制的数据发送回主线程。

这种方法效果更好。它适用于 chrome 桌面。但是录制的音频在android上听起来很垃圾。我在 chrome 上提出了一个问题,请在此处查看票证

有没有人有其他建议的方法?也许通过某种方式使用 MediaRecorder?但是,我们无法访问原始音频,因此无法判断是否播放了响亮的同步声音,除非有一些聪明的方法。

请注意,我对同步后期录制的方法不感兴趣。

更新

使用脚本处理器节点来监听响亮的拍手声并触发 MediaRecorder 启动是一个很好的解决方案!

0 投票
2 回答
463 浏览

javascript - Android 上 AudioWorklet 中出现故障的麦克风录音

我想对麦克风输入进行一些实时处理(包括下采样),最重要的是我想保存输入样本。

在将代码部署到生产环境后,我注意到我收到的一些录音有问题,有些录音比其他录音要多得多。故障是指记录包含零值样本的随机周期。该问题发生在 Android 设备上。

幸运的是,我得到了一台能够始终如一地重现该问题的设备(OnePlus 6)。在将 AudioWorklet 剥离到最低限度后,我仍然可以观察到故障。这就是我的测试 AudioWorklet 类在去掉通信部分后的样子。

为了完整起见,这就是我连接 AudioWorklet 的方式

有趣的是,在功能较弱的 Android 设备上,我没有遇到这些零故障。至少我没有注意到。

有没有人有这个问题的经验?也许我正在使用次优参数初始化 Worklet?

同时,我正在尝试使用已弃用的替代实现ScriptProcessorNode来查看它是否表现更好。

0 投票
0 回答
134 浏览

javascript - 有什么方法可以访问 AudioWorkletProcessor 中的 AnalyserNode?

每当我尝试执行以下操作时:

audioWorkletNode.port.postMessage(analyser);

我收到一条错误消息:

DataCloneError: Failed to execute 'postMessage' on 'MessagePort': AnalyserNode object could not be cloned.

我想将我的分析器节点传递给 AudioWorkletProcessor,这样我就可以在单独的音频线程而不是主线程上使用它进行处理。我所说的具体处理是通过以下方式获取当前播放的音频的频率数据:

analyser.getByteFrequencyData(array);

有任何想法吗?

0 投票
0 回答
500 浏览

webpack - (Next JS 10.2) Audio Worklet 支持

我们的应用程序建立在 Next 之上,我们目前正在将我们的录音引擎从 Script Processor 迁移到 Audio Worklet API。(当然具有向后兼容性)过渡的一部分也是升级到 Webpack 5。我们同时使用 Web Workers 和 Audio Worklet。在切换到 Webpack 5 之前,它带有对 Workers 的本机支持,(或者看起来如此)我们使用了worker-plugin。它对两者都非常有效,但是随着过渡我们不再依赖它,因为它使用过时的 webpack 的 API,并且 Next 带有自己的捆绑的 Webpack 4 和 5,它们似乎不包含向后兼容性。

现在的挑战是让这些与 Next 捆绑的 Webpack 5 一起工作。第一个问题来自网络工作者的全局范围未定义。这可以通过设置config.output.globalObject来解决"(typeof self !== 'undefined' ? self : this)"。一旦workers正常工作,下一个问题就会出现在尝试捆绑worklet的代码时。目前,Webpack 5 不支持 worklet 导入,但它们公开了解析器配置,可用于告诉 webpack 将其作为工作程序加载,根据这个Github 问题。这将在 Next 中失败,除非您还设置config.output.publicPath = "/_next/";了在通过 加载块时audioContext.audioWorklet.addModule(...),代码会以 . 崩溃Uncaught TypeError: Cannot read property 'webpackChunk_N_E' of undefined。如果我们检查包含捆绑的 worklet 代码的块,我们将看到这个 prop 正在以下列方式使用:

很明显,它AudioWorkletGlobalScope没有selfor this,所以这就是为什么它不太顺利。

所以问题是,如何解决这个问题?Audio Worklets 似乎仍然很少受到 Next 和 Webpack 的关注,尽管它现在在Safari中也是默认可用的。(自 14.5 起)

下面是代表我们当前状态的代码片段。(我们正在使用打字稿)

next.config.js

src/util/audio-worklet.ts

.../audio-context.ts

.../audio-worklet-processor.worklet.ts

资料来源:

更新

经过大量挖掘,似乎这个问题是由 webpack 在块中导入脚本引起的。具体来说,当我们尝试导入任何重要的代码(例如 lodash)或使用 babel 认为需要使用其 shims 的数据结构时,Webpack 会注入installChunk函数 which uses importScripts,这显然不受 AudioWorklets 支持。这也插入了上面导致Uncaught TypeError: Cannot read property 'webpackChunk_N_E' of undefined.

这是一个一对一地复制它的回购:https ://github.com/thecynicalpaul/test-audio-worklet-webpack5 (nmp i,然后npm run dev

0 投票
0 回答
66 浏览

web-audio-api - 录制时连接到 AudioWorklet 而不是 ScriptProcessor

我需要将我的 ScriptProcessor 逻辑转换为 AudioWorklet。ScriptProcessor 过程非常简单,只有几行代码,但我很难将它转换为 AudioWorklet。

这是我当前的流程(流来自 userMedia):

然后我将数据发送给工作人员:

我只需要 AudioWorklet 以与 ScriptProcessor 相同的方式处理数据,然后将相同的数据发送给工作人员。

如何将此过程转换为 AudioWorklet?

0 投票
0 回答
52 浏览

audio - 如何使用音频工作集播放从其他客户端接收到的音频缓冲区?

我在音频工作集中接收麦克风数据。

我正在使用 webrtc 数据通道将数据发送到其他客户端。但在收到其他客户端的数据后,我无法播放它。当我尝试在发送方记录 buff 变量时,它正在记录 float32array 但是当我尝试在接收方一侧记录接收到的数据时,它正在记录音频缓冲区。

0 投票
1 回答
87 浏览

ffmpeg - 直接在 Web Audio API AudioWorklet 中使用 FFMPEG 过滤器

我正在尝试利用 FFMPEG 拥有的大量音频过滤器,看看是否可以直接在自定义 AudioWorklet 中使用它们,这样我就不必为每个过滤器重新发明轮子。我遇到的一个选择是将 AVFilter 库转换为 WASM 并编写一个包装类来调用库函数。 https://dev.to/alfg/ffmpeg-webassembly-2cbl

但我正在寻找一种解决方案,其中数据可以通过管道传输到过滤器,并且输出会立即传递到其他音频工作集节点,以便可以毫无延迟地听到效果。

任何形式的帮助将不胜感激。