通过网络音频API使用傅立叶变换

通过Web Audio API提供了JavaScript程序员容易进入无害化处理和合成。在这篇文章中，我们将照耀定制振荡器，通过Web Audio API，可以很容易把傅里叶变换工作合成在浏览器中独特的声音效果的一个鲜为人知的功能，一盏灯。网络音频振荡器通过Web Audio API可让您撰写的音频内容产生声音的曲线图。的振荡器是一个这样的元素 - 产生一个纯音频信号的声源。您可以...

dingshi7798

539人浏览 · 2014-09-10 00:00:00

dingshi7798 · 2014-09-10 00:00:00 发布

Web Audio API使JavaScript程序员可以轻松访问声音处理和合成。在本文中，我们将介绍自定义振荡器，这是Web Audio API的鲜为人知的功能，它使将Fourier变换轻松地工作以在浏览器中合成独特的声音效果变得很容易。

网络音频振荡器

Web Audio API使您可以合成音频元素图以产生声音。振荡器就是这样一种元素–产生纯音频信号的声源。您可以设置其频率和类型，可以是正弦波，正方形，锯齿形或三角形，但是，正如我们将要看到的，还有一个强大的自定义类型。

首先，让我们尝试一个标准振荡器。我们只需将其频率设置为440 Hz，音乐家就会将其识别为A4音符，并且包括一个类型选择器，使您可以听到正弦波，方波，锯齿波和三角波之间的差异。

见笔网络音频振荡器由勒布Molines（ @Clafou ）上CodePen 。

使用自定义振荡器，您可以定义自己的波形来代替这些内置类型，但要有所不同：它们使用傅立叶变换来生成此波形。这使它们非常适合产生逼真的声音。

通过实例进行傅立叶变换

傅里叶变换是音频压缩标准（例如MP3）以及许多其他应用程序使用的数学工具。傅里叶逆变换将信号分解成其组成频率，就像人耳处理振动以感知单个音调一样。

在较高的水平上，傅立叶变换利用了一个事实，即复杂的信号可以分解为增量频率的离散正弦曲线。它使用系数表工作，每个系数表都适用于基本频率的倍数。表格越大，越接近。感兴趣吗？ Wikipedia页面值得一看，其中包括动画，以帮助可视化将信号分解为离散的正弦曲线。

但是，与其深入研究理论，不如通过解构一个简单的连续声音：气喇叭来将其付诸实践。

合成喇叭

对于本文，我们将使用警察警笛和警笛的录音。此处显示了使用开源音频编辑器Audacity创建的号角声谱图。

喇叭光谱仪

它清楚地显示了许多强度不同的线，它们以相等的间隔隔开。如果我们仔细观察，该间隔约为160Hz。

傅立叶变换的工作频率是基频（我们称其为f ）及其泛音，它们是f的倍数。如果我们选择160Hz作为基频f，则320Hz（2 xf）的线是我们的第一个泛音，480Hz（3 xf）的线是我们的第二个泛音，依此类推。

因为光谱仪显示所有线条都位于f的倍数处，所以在f的每个倍数处观察到的强度阵列足以代表对所录制声音的体面模仿。

用于createPeriodicWave的Web音频API文档（根据傅立叶系数创建自定义波形）告诉我们：

The real parameter represents an array of cosine terms (traditionally the A terms). In audio terminology, the first element (index 0) is the DC-offset of the periodic waveform and is usually set to zero. The second element (index 1) represents the fundamental frequency. The third element represents the first overtone, and so on.

还有一个imag参数，我们可以忽略，因为在这个示例中，相位是无关紧要的。

因此，让我们创建一个由这些系数组成的数组（根据从底部开始的光谱仪上的线条亮度，将其估计为0.4、0.4、1、1、1、0.3、0.7、0.6、0.5、0.9、0.8）。然后，我们从该表中创建一个自定义振荡器，并合成产生的声音。

var audioContext = new AudioContext();
var osc = audioContext.createOscillator();

var real = new Float32Array([0,0.4,0.4,1,1,1,0.3,0.7,0.6,0.5,0.9,0.8]);

var imag = new Float32Array(real.length);
var hornTable = audioContext.createPeriodicWave(real, imag);

osc = audioContext.createOscillator();
osc.setPeriodicWave(hornTable);
osc.frequency.value = 160;
osc.connect(audioContext.destination);
osc.start(0);

见笔自定义振荡器：喇叭由勒布Molines（ @Clafou ）上CodePen 。

不完全是一种柔和的声音，而是非常接近录制的声音。当然，声音合成远远超出了频谱本身，尤其是包络是音色的同等重要方面。

从信号数据到傅立叶表

像我们刚才那样手工创建傅立叶系数是不寻常的（很少有声音像我们的号角声音那样简单，它仅由谐波部分组成，即f的倍数）。通常，通过将实际信号数据馈入逆FFT（快速傅立叶变换）算法来计算傅立叶表。

您可以在Chromium存储库中找到用于选择声音的傅里叶系数，其中包括以下演奏的风琴声音：

见笔自定义振荡器：器官由勒布Molines（ @Clafou ）上CodePen 。

dsp.js开源库使您可以从自己的样本数据中计算出此类傅立叶系数。现在，我们将演示如何产生特定的波形。

低频振荡器：警笛声

美国警笛在低频和高频之间振荡。我们可以通过连接两个振荡器使用Web Audio API来实现此目的。第一个（低频振荡器或LFO ）调制第二个的频率，第二个本身产生可听的声波。

为了解构真实的事物，就像以前一样，我们对同一张唱片中的警笛声进行了光谱分析。

锯齿光谱仪

现在，我们看到的是鱼翅形波形，而不是水平线，代表警笛的节奏音调。标准振荡器仅支持正弦波，方波，锯齿波和三角形波形，因此我们不能依靠那些来模仿此特定波形。但是我们可以再次创建一个自定义振荡器。

首先，我们需要一个代表所需曲线的值数组。下面的函数产生这样的值，我们将其填充到名为sharkFinValues的数组中。

看到笔用于警笛音调制波形函数通过的Seb Molines（ @Clafou ）上CodePen 。

接下来，我们使用dsp.js从该信号数据计算傅立叶系数。我们获得了实数组和imag数组，然后将它们用于初始化LFO。

var ft = new DFT(sharkFinValues.length);
ft.forward(sharkFinValues);
var lfoTable = audioContext.createPeriodicWave(ft.real, ft.imag);

最后，我们创建第二个振荡器，并通过增益节点将LFO与其频率相连，以放大LFO的输出。我们的光谱仪显示波形持续约380ms，因此我们将LFO的频率设置为1 / 0.380。它还向我们展示了警报器的基音范围从大约750Hz的低到大约1650Hz的高（中值1200Hz±450Hz），因此我们将振荡器的频率设置为1200，将LFO的增益设置为450。

现在，我们可以启动两个振荡器，以听到我们的警笛声。

osc = audioContext.createOscillator();
osc.frequency.value = 1200;

lfo = audioContext.createOscillator();
lfo.setPeriodicWave(lfoTable);
lfo.frequency.value = 1/0.380;

lfoGain = audioContext.createGain();
lfoGain.gain.value = 450;

lfo.connect(lfoGain);
lfoGain.connect(osc.frequency);
osc.connect(audioContext.destination);

osc.start(0);
lfo.start(0);

在CodePen上查看 Seb Molines（ @Clafou ）的Pen Siren 。

为了更加真实，我们还可以将自定义波形应用于第二个振荡器，如我们在喇叭声中所示。