Javascript Web音频可可视化波形并与之交互

如何编写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);
   }
});

（新窗口。音频上下文）。解码音频数据（音频文件，函数（数据）{
var channel=data.getChannelData（0）；
对于（变量i=0；i

但结果与我想要的相差甚远（也就是说，由于我使用矩形绘制，因此图像不平滑）。我希望它看起来平滑，如下图所示：

---

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

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

毕竟推出了我自己的库：

它从PCM数据中提取波形，并通过单击来查找音频区域

为了（希望如此）简单地使用波形并将其与应用程序集成，您可能需要检查我们在IRCAM中所做的工作，特别是在这种特殊情况下的波形vis

它都是开源的，以模块化为目标（并且正在进行中）

您可以找到一个

---

而相应的

您的渲染代码效率极低，因为它将每秒渲染44100像素的音频。最好使用缩小的数据集渲染最大视口宽度

可以使用audioDurationSeconds*samplerate/viewPortWidthPx计算出适合视口中波形所需的每像素采样范围。因此，对于1000px的视口和44100采样率为2秒的音频文件，每像素采样数=（2*44100）/1000=~88。 对于屏幕上的每个像素，从该采样范围中获取最小值和最大值，使用该数据绘制波形

下面是一个执行此操作的示例算法，但允许您将每个像素的采样数作为参数以及滚动位置，以允许虚拟滚动和缩放。它包括一个分辨率参数，您可以调整该参数以提高性能，该参数指示每个像素采样范围应采集的采样数：

那里的绘制方法与您的类似，为了使其平滑，您需要使用lineTo而不是fillRect。这种差异实际上不应该太大，我认为您可能忘记在画布上设置宽度和高度属性。在css中设置此选项会导致绘制模糊，您需要设置属性

let drawWaveform = function(canvas, drawData, width, height) {
   let ctx = canvas.getContext('2d');
   let drawHeight = height / 2;

   // clear canvas incase there is already something drawn
   ctx.clearRect(0, 0, width, height);

   ctx.beginPath();
   ctx.moveTo(0, drawHeight);
   for(let i = 0; i < width; i++) {
      // transform data points to pixel height and move to centre
      let minPixel = drawData[i][0] * drawHeigth + drawHeight;
      ctx.lineTo(i, minPixel);
   }
   ctx.lineTo(width, drawHeight);
   ctx.moveTo(0, drawHeight);
   for(let i = 0; i < width; i++) {
      // transform data points to pixel height and move to centre
      let maxPixel = drawData[i][1] * drawHeigth + drawHeight;
      ctx.lineTo(i, maxPixel);
   }
   ctx.lineTo(width, drawHeight);
   ctx.closePath();
   ctx.fill(); // can do ctx.stroke() for an outline of the waveform
} 

让drawWaveform=函数（画布、drawData、宽度、高度）{
设ctx=canvas.getContext（'2d'）；
让drawHeight=高度/2；
//清除画布，以防已经绘制了某些内容
ctx.clearRect（0，0，宽度，高度）；
ctx.beginPath（）；
ctx.moveTo（0，图纸高度）；
for（设i=0；i

也许这是一个起点：@Mika，它敲响了一个遥远的演示钟。这是关于：Vadim的主题，这几乎是我想要的。它们不会生成波形图形（它是从SoundCloud加载的），但很容易添加。谢谢！如何绘制本地音频文件的波形（这些文件不在服务器上，但在我的电脑的其他目录中可用）。您的js可以吗？@madLokesh，可以，可以使用文件API（）打印文件。我使用的是Cordova，所以我想我必须使用Cordova的文件API来访问文件，但我应该如何将音频文件作为文件传递。作为base64编码的URl或数组缓冲区。我会尝试一下，然后告诉你。我建议你也在你的GitHub上记录同样的内容，因为一些奇怪的原因，我无法让演示在页面加载时加载音频文件，但是当它作为一个blob拖放时，它工作了。两个链接都是404。