使用 HTML5 音频 API 编写“前置放大器”答案

【问题标题】：Write a "preamp" with HTML5 Audio API使用 HTML5 音频 API 编写“前置放大器”
【发布时间】：2020-01-23 22:13:04
【问题描述】：

我正在使用 HTML5 音频 API 和 JavaScript 编写一个 10 波段均衡器。根据我在网上的研究，可以将10个频段创建为BiquadFilterNode，并依次连接以获得最终效果：

var AudioContext = new AudioContext();
var filter = context.createBiquadFilter(); // create the filter node
filter.type = 'peaking';
filter.gain.value = 0; // Default gain value
filter.Q.value = 1;
filter.frequency.value = 60; // and 170, 310, 600, 1000, 3000, 6000, 12000, 14000, 16000 for the rest 9 bands

（可以看到非常相似的设置here）。

到目前为止一切顺利。但现在我被困在标准均衡器上常见的所谓“前置放大器”上。例如，这是 Winamp 的：

这是 VOX 的：

这是 VLC 的：

等等。你明白了。我的问题是：这个“前置放大器”究竟是做什么的，我如何将它编程到我的应用程序中？

【问题讨论】：

你能再解释一下吗？它如何应用增益？
到什么因素？他们是否添加/减去每个下一个频段的 dB 值（如上面的屏幕截图）？
我读了这篇文章，仍然不明白 GainNode 是一个前置放大器。当前置放大器值（如上面的屏幕截图）似乎以 dB 为单位时，增益是一个无单位的值。该链接似乎也没有回答我关于从前置放大器应用到后续频段的计算的问题。谢谢你的帮助，但你的讽刺并不是真的必要。

标签： javascript html audio

【解决方案1】：

波形项目https://wavesurfer-js.org/example/equalizer/index.html中有一个10波段均衡器

try on codepen

// Equalizer
    wavesurfer.on('ready', function() {
        var EQ = [
            {
                f: 32,
                type: 'lowshelf'
            },
            {
                f: 64,
                type: 'peaking'
            },
            {
                f: 125,
                type: 'peaking'
            },
            {
                f: 250,
                type: 'peaking'
            },
            {
                f: 500,
                type: 'peaking'
            },
            {
                f: 1000,
                type: 'peaking'
            },
            {
                f: 2000,
                type: 'peaking'
            },
            {
                f: 4000,
                type: 'peaking'
            },
            {
                f: 8000,
                type: 'peaking'
            },
            {
                f: 16000,
                type: 'highshelf'
            }
        ];

        // Create filters
        var filters = EQ.map(function(band) {
            var filter = wavesurfer.backend.ac.createBiquadFilter();
            filter.type = band.type;
            filter.gain.value = 0;
            filter.Q.value = 1;
            filter.frequency.value = band.f;
            return filter;
        });

【讨论】：

【解决方案2】：

我为我的项目https://webamp.org 做了一些与此非常相似的事情。相关代码如下所示：

const BANDS = [60, 170, 310, 600, 1000, 3000, 6000, 12000, 14000, 16000];
let output = context.createGain();
const bands = {};

BANDS.forEach((band, i) => {
const filter = context.createBiquadFilter();

bands[band] = filter;

if (i === 0) {
    // The first filter, includes all lower frequencies
    filter.type = "lowshelf";
} else if (i === band.length - 1) {
    // The last filter, includes all higher frequencies
    filter.type = "highshelf";
} else {
    filter.type = "peaking";
}
filter.frequency.value = band;
filter.gain.value = 0;

output.connect(filter);
output = filter;
});

output.connect(context.destination);

你可以在这里找到完整的源代码：https://github.com/captbaritone/webamp/blob/master/js/media/index.js

【讨论】：