如何转换波表以与`OscillatorNode.setPeriodicWave`一起使用？答案

【问题标题】：How to convert a wavetable for use with `OscillatorNode.setPeriodicWave`?如何转换波表以与`OscillatorNode.setPeriodicWave`一起使用？
【发布时间】：2020-05-05 23:28:00
【问题描述】：

我想使用带有 WebAudio OscillatorNode 的自定义波形。我是音频合成的新手，但在数学方面仍然很吃力（至少我可以编程）。

波形被定义为函数，所以我有函数本身，并且可以对波形进行采样。但是，OscillatorNode.createPeriodicWave 方法需要两个数组（real 和 imag）来定义频域中的波形。

AnalyserNode 具有在频域中计算数组（字节或浮点数）的 FFT 方法，但它适用于来自另一个节点的信号。

我想不出一种将波表正确输入AnalyserNode 的方法，但如果可以的话，它只返回一个数组，而OscillatorNode.createPeriodicWave 需要两个。

TLDR 从周期函数开始，如何计算OscillatorNode.createPeriodicWave 的对应参数？

【问题讨论】：

标签： javascript signal-processing fft web-audio-api

【解决方案1】：

由于您有一个由函数定义的周期性波形，您可以计算该函数的Fourier Series。如果该系列有无限数量的术语，则需要截断它。

这有点工作，但这正是预定义振荡器类型的计算方式。例如，请参阅 OscillatorNode 的 square wave 的定义。 PeriodicWave coefficients for the square wave 正是以这种方式计算出来的。

如果您知道波形的带宽，则无需进行凌乱的积分，就可以大大简化工作。只需足够快地均匀采样波形，然后使用FFT 来获得PeriodicWave 所需的系数。更多详情请参阅sampling theorem。

或者您可以假设AudioContext 的采样率（通常为 44.1 kHz 或 48 kHz）足够高，只需每 1/44100 或 1/48000 秒采样一次波形并计算结果样本的 FFT。

【讨论】：

谢谢。计算 FFT 是我遇到的问题。我不知道如何实现。 API 为其PeriodicWave 方法实现了FFT，但没有公开它。我看到的示例代码使用正弦波和方波技巧来避免进行转换。我可以以AudioContext 采样率对波形进行采样，但我不知道如何将振幅数组转换为createPeriodicWave 方法的real 和imag 参数。我找不到要研究的代码，而且我需要一段时间才能掌握数学。
如果速度不重要，只需实现discrete fourier transform 的公式即可。或者搜索 Javascript FFT。 FFT 有很多 Javascript 实现。转换将产生一个复数值数组（或两个单独的数组）。实部是real 参数，虚部是imag 参数PeriodicWave。
我找不到任何在 JS 中实现 FFT 的维护库。其他人也有同样的问题。
FFT 的实现不需要不断升级。它应该基本上可以工作。我很久以前为 Chrome 写过一篇。它适用于我需要的东西，我不需要经常更新它。可能不是最快的，但对我来说足够快。另一种方法是使用 wasm 编译您喜欢的 C/C++ FFT 代码以在浏览器中运行。
不用担心。感谢您的帮助。

【解决方案2】：

我刚刚写了an implementation of this。要使用它，请拖放方块以形成波形，然后弹奏随后出现的钢琴。观看this tweet 中的视频以查看使用示例。现场演示是 alpha 版本，所以代码和 UI 有点粗糙。您可以查看来源here。

我没有写任何文档，但我录制了一些视频 (Video 1) (Video 2) (Video 3) 我在现场编码项目。它们应该是不言自明的。那里有几个我后来修复的错误。工作版本请参考github链接。

【讨论】：