AnalyserNode: getFloatFrequencyData() 方法

基线广泛可用

此功能已得到良好建立，并在许多设备和浏览器版本中运行。它自 2021 年 4 月.

报告反馈

getFloatFrequencyData() 方法是 AnalyserNode 接口的方法，它将当前频率数据复制到传递给它的 Float32Array 数组中。每个数组值都是一个样本，即信号在特定时间的幅度。

数组中的每个元素都表示特定频率的 decibel 值。频率从 0 线性分布到采样率的一半。例如，对于 48000 Hz 的采样率，数组的最后一个元素将表示 24000 Hz 的 decibel 值。

语法

如果您需要更高的性能并且不关心精度，可以使用 AnalyserNode.getByteFrequencyData()，它处理 Uint8Array。

getFloatFrequencyData(array)

js

参数: array

将复制频域数据的 `Float32Array`。对于任何静音的样本，其值为 `-Infinity`。如果数组的元素少于 `AnalyserNode.frequencyBinCount`，则会丢弃多余的元素。如果数组的元素多于所需元素，则会忽略多余的元素。

返回值

示例

如果您需要更高的性能并且不关心精度，可以使用 AnalyserNode.getByteFrequencyData()，它处理 Uint8Array。

const audioCtx = new AudioContext();
const analyser = audioCtx.createAnalyser();
// Float32Array should be the same length as the frequencyBinCount
const myDataArray = new Float32Array(analyser.frequencyBinCount);
// fill the Float32Array with data returned from getFloatFrequencyData()
analyser.getFloatFrequencyData(myDataArray);

无 (`undefined`).

绘制频谱

以下示例演示了如何使用 AudioContext 将 MediaElementAudioSourceNode 连接到 AnalyserNode。在音频播放时，我们使用 requestAnimationFrame() 重复收集频率数据，并绘制一个“winamp 条形图风格”到 <canvas> 元素中。

有关更完整的应用示例/信息，请查看我们的变声器演示（有关相关代码，请参阅 app.js 第 108-193 行）。

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

    //Create audio source
    //Here, we use an audio file, but this could also be e.g. microphone input
    const audioEle = new Audio();
    audioEle.src = "my-audio.mp3"; //insert file name here
    audioEle.autoplay = true;
    audioEle.preload = "auto";
    const audioSourceNode = audioCtx.createMediaElementSource(audioEle);

    //Create analyser node
    const analyserNode = audioCtx.createAnalyser();
    analyserNode.fftSize = 256;
    const bufferLength = analyserNode.frequencyBinCount;
    const dataArray = new Float32Array(bufferLength);

    //Set up audio node network
    audioSourceNode.connect(analyserNode);
    analyserNode.connect(audioCtx.destination);

    //Create 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() {
      //Schedule next redraw
      requestAnimationFrame(draw);

      //Get spectrum data
      analyserNode.getFloatFrequencyData(dataArray);

      //Draw black background
      canvasCtx.fillStyle = "rgb(0 0 0)";
      canvasCtx.fillRect(0, 0, canvas.width, canvas.height);

      //Draw spectrum
      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>