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

Posted 2023-03-05

【中文标题】将音频数据转换为波形数据？

【英文标题】：Turning audio data into waveform data?

【发布时间】：2021-04-09 08:03:28

【问题描述】：

我不明白这个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。

【问题讨论】：

听起来像简单的数学......从数字数组中获取最大值和最小值，这些将是您的相对最大值和最小值，其他所有内容都是其中的百分比。

是的，但我很笨，需要向我解释或参考

大声笑，你不傻，我之前帮过你一个类似的问题：***.com/questions/61903270/… ...让我们看看我能不能把这个放在代码示例中

【参考方案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 数组进行采样，但这正是您所需要的

【讨论】：

我明白了。感谢您花时间这样做。我正在脑海中经历它...我不确定的一件事是如何将峰成对绘制为条形的顶部和底部..

@MichaelJosephAubry 我会这样做：codesandbox.io/s/long-firefly-pefqw?file=/src/App.js

哦，太漂亮了.. 非常感谢.. 我在哪里可以了解有关该数据频率如何工作的更多信息。我将研究这段代码:)

对不起，我不是数据频率方面的专家，这个问题看起来很简单，如果您需要专业服务，请在 gmail 上联系我