时间戳

首页 > 解决方案 > 将音频数据转换为波形数据？

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

问题描述

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

标签： javascripthtmlmathaudiocanvas

解决方案

扩展我关于获得最大值和最小值的评论，然后我们获得相对值，我按照你的建议做 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 数组进行采样，但这就是您所需要的

推荐阅读