将低通滤波器从scriptProcessor (onaudioprocess)迁移到AudioWorkletProcessor (process)

Question

在将我的图书馆从不推荐的scriptProcessor迁移到AudioWorklet时，我面临一个问题。

当前的ScriptProcessor实现

它目前使用AudioProcessingEvent，inputBuffer属性，这是一个AudioBuffer。我应用在这个inputBuffer低通滤波器，感谢OfflineAudioContext，然后分析峰值(低音频率)，以计数和计算BPM候选。

问题是低通过滤器的工作不能在AudioWorkletProcessor中完成。(未定义OfflineAudioContext)

如何将低通过滤器应用于AudioWorkletProcessor的process方法提供的示例(与其处理onaudioprocess事件数据的方法相同)？谢谢

解决方案AudioWorklet实现

对于最终用户，它将如下所示：

import { createRealTimeBpmProcessor } from 'realtime-bpm-analyzer';

const realtimeAnalyzerNode = await createRealTimeBpmProcessor(audioContext);

// Set the source with the HTML Audio Node
const track = document.getElementById('track');
const source = audioContext.createMediaElementSource(track);

// Lowpass filter
const filter = audioContext.createBiquadFilter();
filter.type = 'lowpass';

// Connect stuff together
source.connect(filter).connect(realtimeAnalyzerNode);
source.connect(audioContext.destination);

realtimeAnalyzerNode.port.onmessage = (event) => {
  if (event.data.message === 'BPM') {
    console.log('BPM', event);
  }
  if (event.data.message === 'BPM_STABLE') {
    console.log('BPM_STABLE', event);
  }
};

您可以在版本3下找到完整的代码(现在就已经发布了)。

Answer 1

您可以确保在信号到达AudioWorkletNode之前对其应用低通滤波器。像这样的东西应该管用。

const biquadFilterNode = new BiquadFilterNode(audioContext);
const audioWorkletNode = new AudioWorkletNode(
    audioContext,
    'the-name-of-your-processor'
);

yourInput
    .connect(biquadFilterNode)
    .connect(audioWorkletNode);

因此，您的process()函数在AudioWorkletProcessor中会被过滤的信号调用。

但是，我认为当前的实现并没有真正使用低通过滤器。我可能错了，但看起来startRendering()从未被调用过，这意味着OfflineAudioContext没有处理任何数据。

如果这是真的，您可能根本不需要低通滤波器，您的算法工作。