javascript - 如何使用 AudioContext 对象渲染静态 vaweform

Question

我发现了很多实时渲染音频vaweform的例子。但我只需要在 Canvas 上有一个静态 vaweform 。有人知道如何做到这一点吗？也许通过使用 AudioContext 对象或 createAnalyser() 方法？

Answer 1

获取音频数据的最佳方法是使用 File API 将音频文件加载到 ArrayBuffer(现在我假设您知道如何做到这一点)，然后将其传递给 decodeAudioData Web Audio API 的方法。

您将获得包含解码音频样本(即波形)的 AudioBuffer 的 Promise。一旦 promise 解决，您所要做的就是迭代 AudioBuffer 并将值(或一段时间内的值的平均值，因为您可能不希望每秒 44k 像素;))绘制到 Canvas 上。

需要有关此部分的更多详细信息吗？