在 HTML5 中构建音频混音器

Posted 2023-02-25

【中文标题】在 HTML5 中构建音频混音器

【英文标题】：Build audio mixer in HTML5

【发布时间】：2013-10-29 06:05:46

【问题描述】：

我正在用 html5 开发音频混音器。要求是它应该具有以下控制。所有控件都将是简单的滑块，并且在幻灯片更改时控件的值将发生变化。

音量 音高校正 滤波器（高通和低通） 混响 高、中、低 节奏

我了解如何实现#1,3,4。在#2 我有点困惑，我发现 HTML5 网络音频 API 中没有提供它，唯一的方法是使用 playBackRate。对此有何意见？

没有。 5 - 它似乎类似于高通和低通滤波器。 #3 和 4 有什么区别？

没有。 6 - 是否有任何控制来改变速度？还是和playBackRate一样？

我对音乐术语一无所知，因此对于理解整体观点的任何帮助将不胜感激。

【问题讨论】：

嗨，您成功完成了应用程序。

【参考方案1】：

我不知道该怎么说。 “音高校正”是一个非常深奥的话题，不是你可以真正简化为单个滑块的；实现起来也相当复杂。

同样，节奏和混响是复杂的话题；这在很大程度上还取决于您的声源​​是什么。例如，您通常不会在混音器上设置“节奏”；它设置在某种音序器上，例如鼓机。

Web Audio 中的高通和低通滤波器非常简单，但同样，这取决于您希望如何实现它们以及您希望提供哪些音乐控件。

使用 ConvolverNode 很容易实现混响，但同样有很多潜在的控制（例如，多大的房间/脉冲响应？）。

高/中/低控制非常简单 - 我在我的 wubwubwub DJ 混音器 (http://github.com/cwilso/wubwubwub/) 中使用了以下代码：

    this.low = audioCtx.createBiquadFilter();
    this.low.type = "lowshelf";
    this.low.frequency.value = 320.0;
    this.low.gain.value = 0.0;
    this.low.connect( this.xfadeGain );

    this.mid = audioCtx.createBiquadFilter();
    this.mid.type = "peaking";
    this.mid.frequency.value = 1000.0;
    this.mid.Q.value = 0.5;
    this.mid.gain.value = 0.0;
    this.mid.connect( this.low );

    this.high = audioCtx.createBiquadFilter();
    this.high.type = "highshelf";
    this.high.frequency.value = 3200.0;
    this.high.gain.value = 0.0;
    this.high.connect( this.mid );

【讨论】：

On #5 - 在同一个声源上同时使用（高通、低通滤波器）和（高、中、低）是否有意义？高、中、低就可以了？

hi/low/mid 是典型的音频控件（例如，您可以在立体声或混音器通道条上找到的控件）。高通和低通滤波器更适合彻底改变声音 - 即您可能会对它们进行共振/Q 控制。

你没有说你的混音器是干什么用的；这有很大的不同。

好的，我的混音器很简单。我将播放一个节拍（乐器），同时我将录制我的声音（基本上我会唱歌），然后我想使用上述控件编辑我的录音，最后混合节拍和录音。卡拉OK之类的东西。

【参考方案2】：

Mohayonao's timbre.js 是一个非常简洁的库。 它有高中低通滤波器、混响，并且“+”运算符充当内置混音器。

如果您想开始音高校正，您可以read this paper on pitch shifting。

还有Mixer.js也可以帮助您入门