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

Question

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

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

查看此 fiddle 以更深入地了解代码 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 space 而不会超出范围的最大值是 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()

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

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

Turning audio data into waveform data?

html

javascript

math

audio

canvas