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

Question

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

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

默认情况下，可视化效果如下所示，用户会听到所有频率。

但是当用户选择多个条时，变灰的条会使相关频率静音:

我的想法是，我可以对 frequencyData 数组进行逆向工程，并从根本上消除相关频率吗？

** 更新**

所以我一直在尝试通过串联添加多个具有 notch 类型的 biquadFilter，然后调整它们的频率和 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

您正在寻找的是带通 滤波器。

A band-pass filter (also bandpass filter, BPF) is a device that passes frequencies within a certain range and rejects (attenuates) frequencies outside that range. 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>