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

Question

SO上有几个关于如何绘制音频信号实时波形的示例。（例如：来自音频的 JavaScript 中的波形可视化。）

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

我正在构建一个转录应用程序，我想绘制波形幅度的轨迹（就像这个屏幕截图一样）。

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

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

Answer 1

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

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

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