使用Web音频API使用傅立叶变换

Web音频API使JavaScript程序员轻松访问声音处理和综合。在本文中，我们将介绍自定义振荡器，这是Web音频API的鲜为人知的功能，它使其易于放置傅立叶变换以合成浏览器中独特的声音效果。

钥匙要点

• > Web Audio API允许JavaScript程序员使用声音处理和合成，包括使用自定义振荡器和傅立叶变换来在浏览器中创建独特的声音效果。
>
• 傅立叶变换是一种数学工具，用于将复杂的信号分解为增量频率的离散正弦曲线，使其非常适合逼真的声音生成。此方法由音频压缩标准（例如MP3。>）使用 Web音频API中的自定义振荡器可以使用傅立叶变换来生成波形。此功能允许合成复杂的音调，例如警察警报器或独特的号角声。 Web音频API中使用傅立叶变换和自定义振荡器的声音合成比使用音频样品更灵活，从而使开发人员能够完全自动化自定义效果并合成复杂的音调。
• > Web音频振荡器
Web音频API允许您撰写音频元素以产生声音的图。振荡器就是这样的元素 - 一种生成纯音频信号的声源。您可以设置其频率及其类型，可以是正弦，方形，锯齿或三角形，但是，正如我们将要看到的那样，还有一个强大的自定义类型。 首先，让我们尝试一个标准振荡器。我们只是将其频率设置为440 Hz，音乐家将其识别为A4音符，我们包括一个类型的选择器，让您听到正弦，方形，锯齿和三角形波形之间的区别。
• 请参阅codepen上的seb molines（@clafou）的笔网络音频振荡器。
自定义振荡器可让您定义自己的波形代替这些内置类型，但有一个扭曲：它们使用傅立叶变换来生成此波形。这使它们非常适合现实的声音。

傅立叶以示例

转换 傅立叶变换是音频压缩标准（例如MP3）使用的数学工具，以及许多其他应用程序。逆傅里叶变换将信号分解为其组成频率，就像人耳的过程一样，振动以感知单个音调。 在高水平上，傅立叶会转化一个事实，即可以将复杂的信号分解为增量频率的离散正弦曲线。它使用系数表工作，每种都应用于基本频率的倍数。桌子越大，近似越近。感兴趣？ Wikipedia页面值得一看，并包括动画，以帮助将信号的分解为离散的正弦曲线。 但是，让我们没有深入研究理论，而是通过解构简单的连续声音来付诸实践：空气号。

合成一个喇叭

在本文中，我们将使用警察警报器和号角的录音。此处显示了使用开源音频编辑器Audacity创建的喇叭声的光谱仪。 它清楚地显示了许多不同强度的线，所有这些都以相等的间隔间隔。如果我们仔细观察，则此间隔约为160Hz。 傅立叶变换以基本频率（我们称之为）及其泛音，这是f的倍数。如果我们选择160Hz作为基本F，则该线为320Hz（2 x f）是我们的第一个泛音，该线位于480Hz（3 x f）我们的第二个泛音器等线，依此类推。 由于光谱仪显示所有线均处于F的倍数，因此在F的每个倍数上观察到的强度的数组足以表示对记录的声音的体面模仿。 从傅立叶系数创建自定义波形的CreatePerioDicwave的Web音频API文档告诉我们： 还有一个图像 我们可以忽略的参数作为阶段与此示例无关。 因此，让我们创建一个这些系数的数组（估计它们为0.4、1.4、1、1、1.3、0.7、0.6、0.5、0.9、0.9、0.8，基于光谱仪上线上的亮度从底部开始）。然后，我们从该表创建一个自定义振荡器，并合成所得声音。

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.

<span>var audioContext = new AudioContext();
</span><span>var osc = audioContext.createOscillator();
</span>
<span>var real = new Float32Array([0,0.4,0.4,1,1,1,0.3,0.7,0.6,0.5,0.9,0.8]);
</span>
<span>var imag = new Float32Array(real.length);
</span><span>var hornTable = audioContext.createPeriodicWave(real, imag);
</span>
osc <span>= audioContext.createOscillator();
</span>osc<span>.setPeriodicWave(hornTable);
</span>osc<span>.frequency.value = 160;
</span>osc<span>.connect(audioContext.destination);
</span>osc<span>.start(0);</span>

请参阅Pen自定义振荡器：Seb Molines（@clafou）的horn of codepen。

并不是完全舒缓的声音，而是非常接近录制的声音。当然，声音综合远远超出了单独的频谱，特别是信封是音色同样重要的方面。 从信号数据到傅立叶表 像我们刚刚一样手工创建傅立叶系数是很不寻常的（很少有声音像我们的喇叭声一样简单，它仅由谐波部分组成，即F的倍数）。通常，通过将真实信号数据馈入逆FFT（快速傅立叶变换）算法来计算傅立叶表。 您可以在铬存储库中找到用于选择声音的傅立叶系数，其中包括下面播放的器官声音：

请参阅codepen上的seb molines（@clafou）的笔自定义振荡器：器官 DSP.JS开源库可让您从自己的示例数据中计算此类傅立叶系数。现在，我们将证明这一点以产生特定的波形。

低频振荡器：警察警报音

美国警察警报器在低频和高频之间振荡。通过连接两个振荡器，我们可以使用Web音频API实现这一目标。第一个（低频振荡器或LFO）调节第二个产生可听见声波的第二个频率。 与以前一样，为了解构真实的东西，我们从同一录音中拍摄了警察警报声的光谱仪。

现在，我们看到一个鲨鱼鳍状波形，代表了警笛的节奏调制。标准振荡器仅支持正弦，方形，锯齿和三角形波形，因此我们不能依靠这些波形来模仿这种特定的波形。但是我们可以再次创建一个自定义振荡器。 首先，我们需要代表所需曲线的值数组。以下功能会产生这样的值，我们将其塞入一个名为Sharkfinvalues的数组中。

请参阅codepen上的seb molines（@clafou）的警笛调制的笔波形函数。

接下来，我们使用dsp.js从此信号数据中计算傅立叶系数。我们获得了真实和图像阵列，然后使用这些阵列来初始化LFO。

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.

最后，我们创建第二个振荡器，并通过增益节点将LFO输出的增益节点连接到其频率。我们的光谱仪显示波形持续约380ms，因此我们将LFO的频率设置为1/0.380。它还向我们表明，警笛的基本音调范围从约750Hz的低点到高约1650Hz（中位数为1200Hz±450Hz），因此我们将振荡器的频率设置为1200，LFO的增益为450。 现在，我们可以启动两个振荡器，以听到我们的警察。

<span>var audioContext = new AudioContext();
</span><span>var osc = audioContext.createOscillator();
</span>
<span>var real = new Float32Array([0,0.4,0.4,1,1,1,0.3,0.7,0.6,0.5,0.9,0.8]);
</span>
<span>var imag = new Float32Array(real.length);
</span><span>var hornTable = audioContext.createPeriodicWave(real, imag);
</span>
osc <span>= audioContext.createOscillator();
</span>osc<span>.setPeriodicWave(hornTable);
</span>osc<span>.frequency.value = 160;
</span>osc<span>.connect(audioContext.destination);
</span>osc<span>.start(0);</span>

请参阅Codepen上的Seb Molines（@clafou）的笔警笛。

对于更多的现实主义，我们还可以将自定义波形应用于第二个振荡器，正如我们用喇叭声所显示的那样。

结论

借助其使用傅立叶变换，自定义振荡器为Web音频开发人员提供了一种简单的方法来综合复杂的音调并完全自动化自定义效果，例如我们已经证明的警笛波形。 声音合成比使用音频样品更灵活。例如，在此警笛效果上很容易添加更多效果，就像我在此移动应用程序中添加多普勒变化所做的那样。 “我可以使用”规格表明，除IE外，Web Audio API享有广泛的浏览器支持。并非所有浏览器都具有最新的W3C标准，但是可以帮助编写跨浏览器代码。 Android L将在WebView中添加Web Audio API支持，iOS自6版以来一直在做。现在是开始实验的好时机！

>关于使用Web音频API

使用傅立叶变换的常见问题（常见问题解答）

Web音频API是什么，它如何工作？

> Web Audio API是用于处理和合成Web应用程序中音频的高级JavaScript API。它允许开发人员选择音频源，为音频添加效果，创建音频可视化，应用空间效果（例如平移）等等。它通过创建音频上下文来起作用，可以从中创建各种音频节点并将其连接在一起以形成音频路由图。每个节点都执行特定的音频函数，例如产生声音，更改音量或应用音频效果。

>傅立叶变换如何在Web音频API中的工作？

> Web Audio API中的fftSize属性是什么？ Web音频API中的fftSize属性用于设置快速傅立叶变换（FFT）的大小以确定频域。它是两个值的功率，它决定执行傅立叶变换时将使用的样品数量。值越高，频率箱就越多，频率数据的详细信息就越详细。但是，较高的值还意味着需要更多的计算能力。
>如何使用Web Audio API来创建音频可视化？然后使用该数据创建视觉表示。这通常是使用AnalySernode接口完成的，该接口提供实时频率和时间域分析信息。然后，这些数据可用于创建可视化，例如波形图或频谱图。创建可视化的特定方法将取决于您要创建的可视化类型以及用于创建图形的库或工具。
如何使用Web音频API应用于音频Web Audio API提供了多种节点，可用于在音频上应用效果。其中包括用于变化体积的增益表，用于应用各种滤波器效果的Biquadfilternode，用于应用卷积效应（例如混响）等的探路表等。可以从音频上下文创建这些节点，然后在音频路由图中连接以将期望的效果应用于音频。

Web Audio API？ Web音频API通常用于Web应用程序中的各种目的。其中包括播放和控制音频，在游戏中添加声音效果，创建音频可视化，在虚拟现实应用程序中应用空间效果，等等。它提供了一种强大而灵活的方式，可以在Web应用程序中使用音频。>

>如何使用Web Audio API控制音频的播放？这包括启动和停止音频，调整播放率并寻求音频不同部分的能力。这通常是使用AudioBufferSourcenode接口完成的，该接口代表由内存音频数据组成的音频源。

Web Audio API API的某些限制是什么？强大而灵活，它确实有一些局限性。例如，它需要一个支持API的现代浏览器，用于更高级的音频处理任务可能很复杂。此外，由于它是高级API，因此与低级API相比，它可能无法提供某些应用所需的控制级别。

>

我可以使用Web Audio API记录音频吗？是的，可以使用Web音频API记录音频，尽管这不是其主要目的。这通常是使用MediaStreamAudioSourCenode接口完成的，该接口代表由媒体流组成的音频源（例如来自麦克风或其他音频输入设备）。

>我如何了解有关Web Audio API的更多信息？ 🎜>

>有许多资源可用于了解有关Web音频API的更多信息。 Mozilla开发人员网络（MDN）提供了有关API的全面文档，包括指南和教程。在Codecademy，Udemy和Coursera等网站上也有许多在线教程和课程。此外，还有几本关于该主题的书籍，例如Boris Smus的“ Web Audio API”。

以上是使用Web音频API使用傅立叶变换的详细内容。更多信息请关注PHP中文网其他相关文章！