Web Audio可视化并与波形交互

Question

如何编写JavaScript程序以显示音频文件中的波形？我想使用Web Audio和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数据中绘制波形,并通过单击来搜索音频区域.

Answer 2

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