javascript - 在 Javascript 中绘制可缩放的音频波形时间线

Question

我有来自歌曲的原始 44,1 kHz 音频数据作为 Javascript 数组，我想从中创建一个可缩放的时间线。

来自 Audacity 的示例时间表：

由于有数百万个时间点，普通的 Javascript 图形库可能不会削减它：我认为，不确定，普通的图形库会在这么多的时间点上死掉。但是是否已经存在用于 JS 的这种可视化的库？Canvas、webGL、SVG 都是可接受的解决方案。

最好使用缩放和平移的解决方案。

请注意，这严格发生在客户端，服务器端解决方案是不可接受的。

Answer 1

我已经非常广泛地研究了同样的问题。据我所知，现有的唯一一个接近你想要的项目是wavesurfer.js。我没用过，但截图和描述听起来很有希望。

另请参阅此问题。

祝你好运。

Answer 2

您不能简单地获取波形数据并渲染所有数据点，这是非常低效的。

变量解释：

• width : 以像素为单位绘制区域宽度，max 为屏幕宽度
• height：与宽度相同，但与绘图区域的高度相同
• spp：每个像素的样本，这是您的缩放级别
• 分辨率：每个像素样本范围内的样本数，调整性能与准确性。
• scroll：您将需要虚拟滚动以获得性能，这是以 px 为单位的滚动位置
• data：原始音频数据数组，可能有几百万个样本长
• drawData : 用于绘制的缩减音频数据

您将只需要从音频数据中获取视口中的样本并减少这些样本。通常这会产生一个 2 * 宽度的数据集，您可以使用此数据集来渲染图像。缩小增加spp，放大减少它。更改滚动值会对其进行平移。

以下代码具有 O(RN) 复杂度，其中 N 是宽度，R 是分辨率。最大精度为 spp <= 分辨率。

代码看起来像这样，它得到峰值，你也可以做 rms 或平均值。

let reduceAudioPeak = function(data, spp, scroll, width, resolution) {
    let drawData = new Array(width);
    let startSample = scroll * spp; 
    let skip = Math.ceil(spp / resolution);

    // For each pixel in draw area
    for (let i = 0; i < width; i++) {
        let min = 0; // minimum value in sample range
        let max = 0; // maximum value in sample range
        let pixelStartSample = startSample + (i * spp);

        // Iterate over the sample range for this pixel (spp) 
        // and find the min and max values. 
        for(let j = 0; j < spp; j += skip) {
           const index = pixelStartSample + j;
           if(index < data.length) {
               let val = data[index];
               if (val > max) {
                  max = val;
               } else if (val < min) {
                  min = val;
               }
           }
        }

        drawData[i] = [min, max];
    }
    return drawData;
}

有了这些数据，您可以像这样绘制它，您可以使用线条、svg 等：

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);
   for(let i = 0; i < width; i++) {
      // transform data points to pixel height and move to centre
      let minPixel = drawData[i][0] * drawHeigth + drawHeight;
      let maxPixel = drawData[i][1] * drawHeight + drawHeight;
      let pixelHeight = maxPixel - minPixel;

      ctx.fillRect(i, minPixel, 1, pixelHeight);
   }
} 

Answer 3

我在浏览器中使用RaphaelJS进行 SVG 渲染，它的表现非常好。这就是我想要的。希望 SVG 能够胜任这项任务。