AnalyserNode.getFloatFrequencyData()

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since April 2021.

getFloatFrequencyData() 作为AnalyserNode 接口的方法能将当前分析节点（AnalyserNode）的频率数据拷贝进一个 Float32Array 数组对象。

此数组表示的频率范围为 0 ~ 22050 Hz，每个元素表示对应频率上的信号分量强度，单位为分贝。

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

语法

js
getFloatFrequencyData(array)

参数

array

你即将用于拷贝频域数据（frequency domain data）的 Float32Array 数组。对于任何无声的样本，它的值应该是 -Infinity. 如果这一数组的可容纳元素数少于该分析节点的AnalyserNode.frequencyBinCount值，超出容量的数据元素将被舍弃。而如果容量多于需要，多余的数组元素将不会被操作。

返回值

无返回值。

示例

js
const audioCtx = new AudioContext();
const analyser = audioCtx.createAnalyser();
// Float32Array 的长度应该和 frequencyBinCount 相同
const myDataArray = new Float32Array(analyser.frequencyBinCount);
// 用 getFloatFrequencyData() 方法的返回数据填充 Float32Array 数组
analyser.getFloatFrequencyData(myDataArray);

例：绘制一个频谱

下面的示例展示了一个 AudioContext对象连接 MediaElementAudioSourceNode到AnalyserNode 对象的基本用法（即用 AudioContext 将音频内容连接到分析节点，从而可以展开对音频数据的分析）. 当音频播放时，我们使用 requestAnimationFrame()方法产生轮询从而不断地收集频率数据，进而在 <canvas> 元素上绘制 winamp（windows 上的一款 MP3 播放软件）条形图风格的频谱。

更多的应用示例和应用信息，可以参看我们 Voice-change-O-matic-float-data 示例 (在 source code 同样有).

html
<!doctype html>
<body>
  <script>
    const audioCtx = new AudioContext();

    //创建一个音频源
    //在示例中我们使用了一个音频文件，但其实这里也可以用麦克风输入
    const audioEle = new Audio();
    audioEle.src = "my-audio.mp3"; //这里是文件名
    audioEle.autoplay = true;
    audioEle.preload = "auto";
    const audioSourceNode = audioCtx.createMediaElementSource(audioEle);

    //生成一个分析节点 (analyser node)
    const analyserNode = audioCtx.createAnalyser();
    analyserNode.fftSize = 256;
    const bufferLength = analyserNode.frequencyBinCount;
    const dataArray = new Float32Array(bufferLength);

    //设置音频节点网络（音频源->分析节点->输出）
    audioSourceNode.connect(analyserNode);
    analyserNode.connect(audioCtx.destination);

    //生成 2D canvas
    const canvas = document.createElement("canvas");
    canvas.style.position = "absolute";
    canvas.style.top = 0;
    canvas.style.left = 0;
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;
    document.body.appendChild(canvas);
    const canvasCtx = canvas.getContext("2d");
    canvasCtx.clearRect(0, 0, canvas.width, canvas.height);

    function draw() {
      //准备好下次重绘
      requestAnimationFrame(draw);

      //获取实时的频谱信息
      analyserNode.getFloatFrequencyData(dataArray);

      //画一个黑色的背景
      canvasCtx.fillStyle = "rgb(0, 0, 0)";
      canvasCtx.fillRect(0, 0, canvas.width, canvas.height);

      //绘制频谱
      const barWidth = (canvas.width / bufferLength) * 2.5;
      let posX = 0;
      for (let i = 0; i < bufferLength; i++) {
        const barHeight = (dataArray[i] + 140) * 2;
        canvasCtx.fillStyle =
          "rgb(" + Math.floor(barHeight + 100) + ", 50, 50)";
        canvasCtx.fillRect(
          posX,
          canvas.height - barHeight / 2,
          barWidth,
          barHeight / 2,
        );
        posX += barWidth + 1;
      }
    }

    draw();
  </script>
</body>

规范

Specification
Web Audio API
# dom-analysernode-getfloatfrequencydata

浏览器兼容性

BCD tables only load in the browser

See also