将音频数据转换为波形数据？

Question

我不明白这个https://github.com/bbc/peaks.js/blob/master/demo/TOL_6min_720p_download.json 怎么能变成带有峰值的波形可视化。

我看到该文件中的数据是一个扁平的数字数组。我正在尝试了解如何将这些数字转换为对视觉绘图有意义的东西。

查看此小提琴以更深入地了解代码https://codesandbox.io/s/cool-dijkstra-fyw25?file=/src/App.js

目标是创建看起来像图像的高低峰。我假设每 2 个索引代表一个峰值，但我不想假设任何事情。

我正在提取 JSON 并将其传递给这样的绘图函数

  const peaksReq = await fetch(
    "https://raw.githubusercontent.com/bbc/peaks.js/master/demo/TOL_6min_720p_download.json"
  );
  const peaksData = await peaksReq.json();
  const peaks = peaksData.data;

  // peaks is now a flat array of numbers

目标是将平峰阵列变成如上图所示的条形。第一组数据是一堆 0，最终是一个有意义的序列，看起来像这样[-7,5,-27,25,-30,26,-29,30,-24,26]

我的理解——猜测是将其转换为像 [[-7,5],[-27,25],[-30,26],[-29,30],[-24,26]] 这样的二维数组，然后将这些数字转换为适合边界的 px。 -7, 5 会相对于中心公理上下波动。

我不太明白如何解决的问题是，如果它在 40px 元素内，我们如何保持这些数字相对。即 40px 的中心是 20px。条形在距其中心 40px 的空间内向上移动而不会超出界限的最大值为 20px，您可以添加一个 5px 的缓冲区，例如 15px。

Answer 1

扩展我关于获取最大值和最小值的评论，然后我们获取相对值，我正在按照您的建议进行 15px 边界，因此中心将为 0，上限为 15px，下限绑定 -15px 将用于我们的计算...

这是我们可以做的：

async function start() {
  const peaksReq = await fetch(
    "https://raw.githubusercontent.com/bbc/peaks.js/master/demo/TOL_6min_720p_download.json"
  );
  const peaksData = await peaksReq.json();
  const peaks = peaksData.data;

  const max = Math.max(...peaks)
  console.log(max, 15)
  
  const min = Math.min(...peaks)
  console.log(min, -15)
  
  console.log("---------------")
  for (let i = 801; i < 805; i++) {
    let val = peaks[i] * 15 / max
    if (peaks[i] < 0)
      val = peaks[i] * -15 / min
    val = Math.round(val*10)/10
    console.log(peaks[i], val)
  } 
}

start()

我只是在输出中对 peaks 数组进行采样，但这正是您所需要的