Web Audio 可视化波形并与之交互

Question

如何编写 JavaScript 程序来显示音频文件中的波形？我想使用网络音频和画布。

我试过这段代码：

 (new window.AudioContext).decodeAudioData(audioFile, function (data) {
   var channel = data.getChannelData(0);
   for (var i = 0; i < channel; i++) {
       canvas.getContext('2d').fillRect(i, 1, 40 - channel[i], 40);
   }
});

但结果与我想要的相差甚远（即图像不平滑，因为我用矩形绘制）。我希望它看起来像这张图片一样平滑：

关于如何实现波形的任何提示？

原文由 katspaugh 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

您可能对 AudioJedit 感兴趣。这是一个 托管在 GitHub 上 的开源项目。它有用于加载音频文件的小型服务器端 node.js 脚本，但所有与音频的交互都在客户端 JavaScript 中实现。我认为这与您正在寻找的相似。

原文由 Vadim Baryshev 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

毕竟推出了我自己的库： wavesurfer.js 。

它从 PCM 数据中绘制波形，并通过单击它来寻找音频区域。

原文由 katspaugh 发布，翻译遵循 CC BY-SA 3.0 许可协议