在不断增长的画布上绘制音频的幅度轨迹——可能吗？

Question

关于如何绘制音频信号的实时波形，有几个关于 SO 的示例。 （例如：Waveform visualization in JavaScript from audio。）

我有一个稍微不同的目标，我不确定这是否可能。

我正在构建一个转录应用程序，我想绘制波形幅度的轨迹（类似于this screenshot）。

问题是，我不知道音频会持续多久，所以如果我实时绘制它，我不知道我的画布需要多大。

是在构建画布之前加载整个音频文件并检查其长度的唯一解决方案吗？

Answer 1

我刚刚使用 processing.js 和 Chrome 的 Web Audio Api 做了一个与您的问题类似的解决方案。如果您不想事先加载整个文件，我建议将音频文件的持续时间和采样率保存在可以动态调用的数据库中。这应该足以在实际加载文件之前确定您需要的画布大小。

更重要的是，在我的应用程序中，无论音频文件的长度如何，我都希望画布大小保持恒定宽度，因此我只是水平缩放波形以适应波形窗口的宽度。

如果您需要任何代码示例来帮助您解决此问题，请告诉我。