跳到主要内容

getFloatFrequencyData

2024年02月05日
柏拉文
越努力，越幸运

一、认识​

analyserNode.getFloatFrequencyData() 作为 AnalyserNode 接口的方法能将当前分析节点（AnalyserNode）的频率数据拷贝进一个 Float32Array 数组对象。此数组表示的频率范围为 0 ~ 22050 Hz，每个元素表示对应频率上的信号分量强度，单位为分贝。

如果你需要更好的性能并且不太在意数据的精度，你可以使用 AnalyserNode.getByteFrequencyData() 作为代替，这一接口使用 Uint8Array来存储数据（对应的也是这个精度的格式）.

二、语法​

const audioContext = new AudioContext();
const analyser = audioCtx.createAnalyser();
// Float32Array 的长度应该和 frequencyBinCount 相同
const myDataArray = new Float32Array(analyser.frequencyBinCount);
// 用 getFloatFrequencyData() 方法的返回数据填充 Float32Array 数组
analyser.getFloatFrequencyData(myDataArray);
  • myDataArray: 你即将用于拷贝频域数据（frequency domain data）的 Float32Array 数组。对于任何无声的样本，它的值应该是 -Infinity. 如果这一数组的可容纳元素数少于该分析节点的AnalyserNode.frequencyBinCount值，超出容量的数据元素将被舍弃。而如果容量多于需要，多余的数组元素将不会被操作。

三、场景​

3.1 根据音频文件绘制频谱​

描述: 绘制频谱需要将 AudioContext 对象实例连接 MediaElementAudioSourceNode 到 AnalyserNode 对象。即用 AudioContext 将音频内容连接到分析节点，从而可以展开对音频数据的分析。当音频播放时，我们使用 requestAnimationFrame() 方法产生轮询从而不断地收集频率数据，进而在 <canvas> 元素上绘制条形图风格的频谱。

实现:

  1. 创建音频源

  2. 生成分析节点

  3. 设置音频节点网络: 音频源 -> 分析节点 -> 输出

3.2 根据麦克风输入绘制频谱​

描述: 绘制频谱需要将 AudioContext 对象实例连接 MediaElementAudioSourceNode 到 AnalyserNode 对象。即用 AudioContext 将音频内容连接到分析节点，从而可以展开对音频数据的分析。当音频播放时，我们使用 requestAnimationFrame() 方法产生轮询从而不断地收集频率数据，进而在 <canvas> 元素上绘制条形图风格的频谱。

实现:

  1. 创建音频源

  2. 生成分析节点

  3. 设置音频节点网络: 音频源 -> 分析节点 -> 输出