使用 WebAudioApi 和 WebAssembly 进行降噪

Question

我正在尝试使用编译成 wasm 并从 Javascript 调用的 C 库在 WebRtc 中创建噪声消除过滤器。

我能够使用 WebAudioApi 捕获 pcm 音频并使用 wasm 处理帧。

这是我的代码：

navigator.mediaDevices.getUserMedia(constraints).then(function success(stream) {
var audiocontext;
var audiosource;
var audiopreprocessnode;

 audiocontext = new (window.AudioContext || window.webkitAudioContext)();
 audiosource = audiocontext.createMediaStreamSource(stream);
 audioPreprocessNode = audioCtx.createScriptProcessor(2048,1,1);

 audiosource.connect(audioPreprocessNode);
 audioPreprocessNode.connect(audioCtx.destination);
 
 audioPreprocessNode.onaudioprocess = function(e) {
 
console.log(e.inputBuffer.getChannelData(0));

 // audio captured from mic is denoised using wasm
 var denoised_array = Module["_denoise"](e.inputBuffer.getChannelData(0));
 e.inputBuffer.getChannelData(0).set(denoised_array);
 
 console.log(e.inputBuffer.getChannelData(0)); 
 
 }
   
}

我使用 onaudioprocess 捕获输入帧并在输入缓冲区中设置处理（去噪）帧。 我使用了两个日志来检查值是否在处理后被更改并且它正在更改，但是处理后的值没有发送到 webrtc 流，未更改的原始帧只发送到流。

研究 WebaudioApi 文档后，我发现“在此范围之外对此 AudioBuffer 的任何脚本修改都不会产生任何可听效果。”

https://www.w3.org/2014/annotation/experiment/webaudio.html#AudioProcessingEvent-section

是否可以在 webrtc 流中发送这个经过处理（去噪）的帧。任何帮助将不胜感激。

Answer 1

如果你想让ScriptProcessorNode输出修改后的信号你需要在AudioProcessingEvent上设置outputbuffer。

// ...

var denoised_array = Module["_denoise"](e.inputBuffer.getChannelData(0));

e.outputbuffer.getChannelData(0).set(denoised_array);

// ...