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

Question

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

我试过这段代码:

(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);
   }
});

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

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

Answer 1

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

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