AnalyserNode 如何（如果有的话）用于分析整个音频文件，并获取可视化所需的数据？

Question

我尤其对AnalyserNode.getFloatTimeDomainData()方法感兴趣。

我可以使用这种方法来创建代表整个音频文件的波形吗？

或者 AnalyserNode 仅用于音频流？

MDN 文档说：

The AnalyserNode interface represents a node able to provide real-time frequency and time-domain analysis information. It is an AudioNode that passes the audio stream unchanged from the input to the output, but allows you to take the generated data, process it, and create audio visualizations.

https://developer.mozilla.org/en-US/docs/Web/API/AnalyserNode

所有示例似乎都使用 AudioBuffer.getChannelData() 来获取数据以可视化整个音频文件。如本文所述：

https://css-tricks.com/making-an-audio-waveform-visualizer-with-vanilla-javascript/

来自文章：

const filterData = audioBuffer => {
  const rawData = audioBuffer.getChannelData(0); // We only need to work with one channel of data
  const samples = 70; // Number of samples we want to have in our final data set
  const blockSize = Math.floor(rawData.length / samples); // the number of samples in each subdivision
  const filteredData = [];
  for (let i = 0; i < samples; i++) {
    let blockStart = blockSize * i; // the location of the first sample in the block
    let sum = 0;
    for (let j = 0; j < blockSize; j++) {
      sum = sum + Math.abs(rawData[blockStart + j]) // find the sum of all the samples in the block
    }
    filteredData.push(sum / blockSize); // divide the sum by the block size to get the average
  }
  return filteredData;
}

Answer 1

您在主题中说您拥有整个文件。如果是这种情况，您可以解码文件 (decodeAudioData)，您将获得一个包含所有样本的 AudioBuffer，然后您可以将其用于可视化。

如果您不能将整个文件解码到内存中，您将不得不使用不同的方法，并且 AnalyserNode 可能无法工作，因为它是异步的，所以您可能无法获得所有样本，或者您可能得到重复项。如果这是不可接受的，您可能必须使用连接到 ScriptProcessorNode 或 AudioWorkletNode 的 MediaStreamAudioSourceNode 来获取所需的时域数据。