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

Question

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

我正在使用Canvas可视化频率数据,并希望用户能够突出显示部分可视化和反过来的静音频率.

默认情况下,可视化将如下所示,用户将听到所有频率.

但是当用户选择几个条形图时,灰色的条形图会使相关频率静音:

我的想法是,我可以对frequencyData数组进行反向工程,并基本上将相关频率静音吗？

**更新**

所以我一直在玩几个串联biquadFilter类型的s 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中,否则它将无法与web音频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

您\xe2\x80\x99正在处理音频，因此您需要的是带通滤波器。这将允许您仅播放某些频率。

\n\n

我可以看到你\xe2\x80\x99已经使用FFT来获取频率。从那里，你有两个选择。一种方法是从进行 FFT 后获得的数组中删除所需的频率。然后，为了获得声音，您需要时域信号，因此您需要逆 FFT。另一种选择是在时域中创建滤波器，然后与原始信号进行卷积。

\n\n

我\xe2\x80\x99m 没有发布代码，因为我\xe2\x80\x99m 刚刚用C 做了这个，但我\xe2\x80\x99m 非常确定有很多库可以轻松地执行这些操作（卷积/IFFT）。
\n:)

\n