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

Question

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

javascriptweb-audio-api

12

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

我正在使用Canvas可视化频率数据，并希望用户能够突出显示可视化的某些部分，从而静音频率。

默认情况下，可视化将如此，并且用户将听到所有频率。

但是当用户选择几个条形图时，灰色区域将静音相关频率：

我的想法是是否可以反向工程频率数据数组，并基本上静音相关的频率？

** 更新 **

因此，我添加了几个类型为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);

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

我正在尝试的是否可能，如果可能的话，任何建议都将不胜感激 :)

- DanV

1

你能否在画布绘制部分使用[].slice()来切割数据？如果需要的话，你可以使用 Math.max.apply(0, arrData) 进行动态重新调整。 - dandavis

是的，但这不会禁用它们所代表的音频频率。 - DanV

2个回答

0

你正在处理音频，所以你需要的是一个带通滤波器。这将允许您仅播放特定频率。

我可以看到你已经使用FFT获取频率。从那里开始，你有两个选择。一种方法是从执行FFT后获得的数组中删除所需的频率。然后，为了获得所需的声音信号，您需要在时间域中进行反向FFT。另一种选择是在时间域中制作您的滤波器，然后与原始信号进行卷积。

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

- Luis Gonzalez

移除频率并进行逆傅里叶变换是行不通的。因为你没有相位信息。即使你有相位信息，也不会起作用，因为该操作不是带限制的，所以会在输出中引入混叠伪像。 - Raymond Toy

那么，你有什么建议？ - Luis Gonzalez

问题有点不太明确，但也许可以使用一堆陷波滤波器？或者伪造一个线性相位来配合FFT，使用设计程序获取脉冲响应并在卷积器中使用它？（这是你建议的。） - Raymond Toy

感谢@RaymondToy的指导，我尝试添加了陷波滤波器，并更新了问题，希望现在更加清晰明了。如果您有时间对此提供更多指导，我将不胜感激 :) - DanV

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- NVRM · Accepted Answer

你需要的是一个带通滤波器。带通滤波器是一种设备，可以通过一定范围内的频率并拒绝（衰减）该范围外的频率。幸运的是，Web音频API通过BiquadFilterNode提供了它。

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

基于提供的演示代码，要对HTML音频播放器应用400Hz频率范围的带通滤波器。

必须通过js创建html音频元素并插入DOM，否则它将无法与Web Audio 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>

代表频率范围的中心，增益值会扩大范围。

这些滤波器可以像此示例中的其他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>