使用 Web Audio API 隔离音频上下文的频率

Question

我正在尝试使用 WebAudio API，并尝试构建一个分析器，用户可以与之交互并最终打开和关闭音乐中的不同频率，以隔离音轨中的不同节拍，即低音、底鼓等。

我正在使用 Canvas 可视化频率数据，并希望用户能够突出显示可视化的部分内容，并依次静音频率。

默认情况下，可视化看起来像这样，用户会听到所有频率。

但是当用户选择几个条时，灰色的会静音相关频率：

我的想法是我可以对频率数据数组进行逆向工程并从本质上使相关频率静音吗？

** 更新**

所以我一直在尝试添加几个biquadFilters 类型为notch，然后调整它们的频率和Q 值。这确实有助于隔离音乐的片段，但不完全是我想要的。这是我目前使用的代码...

const audioContext = new window.AudioContext();
const source = audioContext.createMediaElementSource(element);
const biquadFilter1 = audioContext.createBiquadFilter();
const biquadFilter2 = audioContext.createBiquadFilter();
const biquadFilter3 = audioContext.createBiquadFilter();
const analyser = audioContext.createAnalyser();

biquadFilter1.connect(analyser);
biquadFilter2.connect(analyser);
biquadFilter3.connect(analyser);
source
    .connect(biquadFilter1)
    .connect(biquadFilter2)
    .connect(biquadFilter3);
analyser.connect(audioContext.destination);

我不确定我是否设置正确，但它确实允许我非常粗略地操纵频率，但感觉这样做没有准确的科学。

我正在尝试是否可行，如果是这样，任何建议都非常感谢:)

Answer 1

您正在寻找的是一个带通过滤器。

带通滤波器（也称为带通滤波器，BPF）是一种通过 一定范围内的频率并拒绝（衰减） 超出该范围的频率。 https://en.wikipedia.org/wiki/Band-pass_filter

我们很幸运，网络音频 api 通过 BiquadFilterNode 提供它。

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

因此，根据提供的演示代码，将 400Hz 频率范围的带通滤波器应用于 html 音频播放器。

html音频元素必须由js创建，然后插入到DOM中，否则将无法与网络音频api一起使用。

 <div id="hello"></div>

 <script>
    var audioCtx = new (window.AudioContext || window.webkitAudioContext)();

    // Create new player 
    var a = document.createElement("audio");
    // Give a source song
    a.src = "vorbis.ogg";
    // Show the controls
    a.setAttribute("controls", "");
    // Append to the DOM
    hello.appendChild(a);

    // Player now ready for the web audio api
    var mediaElement = a;

    //set up the different audio nodes we will use for the app

    var gainNode = audioCtx.createGain();
    var biquadFilter = audioCtx.createBiquadFilter();

    // connect the nodes together

    source = audioCtx.createMediaElementSource(mediaElement);
    source.connect(biquadFilter);
    biquadFilter.connect(gainNode);
    gainNode.connect(audioCtx.destination);

    // Manipulate the Biquad filter

    biquadFilter.type = "bandpass";
    biquadFilter.frequency.value = 400;
    biquadFilter.gain.value = 25;
</script>

biquadFilter.frequency.value 表示频率范围的中心。范围随着增益值而扩大。

这个过滤器可以像这个例子一样与其他一些GainNode链接，参见https://developer.mozilla.org/en-US/docs/Web/API/GainNode

以类似的方式，在 1000hz 到 1500hz 的范围内使用两个滤波器，一个低通滤波器和一个高通滤波器。

<div id="hello"></div>
<script>
var audioCtx = new (window.AudioContext)()
var a = document.createElement("audio")
a.src = "vorbis.ogg"
a.setAttribute("controls", "")
hello.appendChild(a)

var mediaElement = a

var gainNode = audioCtx.createGain()
var lowpass = audioCtx.createBiquadFilter()
var highpass = audioCtx.createBiquadFilter()

source = audioCtx.createMediaElementSource(mediaElement)
source.connect(lowpass)
lowpass.connect(highpass)
highpass.connect(gainNode)
gainNode.connect(audioCtx.destination)

lowpass.type = "lowpass"
lowpass.frequency.value = 1000
lowpass.gain.value = -1
highpass.type = "highpass"
highpass.frequency.value = 1500
highpass.gain.value = -1 
</script>

Answer 2

您正在处理音频，因此您需要一个带通滤波器。这将允许您只播放某些频率。

我可以看到您已经在使用 FFT 来获取频率。从那里，您有两个选择。一种是从执行 FFT 后获得的阵列中删除您想要的频率。然后，为了获得声音，您需要时域中的信号，因此您需要逆 FFT。另一种选择是在时域中制作滤波器，然后与原始信号进行卷积。

我没有发布代码，因为我只是用 C 语言编写的，但我很确定有很多库可以轻松完成这些操作（卷积/IFFT）。
:)