用HTML5音频接口写一个“前置放大器”

Question

我正在写一个使用HTML5 Audio 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的：

​

​

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

Answer 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;
        });

Answer 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