使用Web Audio API

Question

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

我正在使用Canvas可视化频率数据，并希望用户能够突出显示部分可视化，以及反过来静音频率。

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

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

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

**更新**

所以我一直在玩几个biquadFilter串联notch的{​​{1}}，然后调整它们的频率和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）。
：）