AnalyserNode: getFloatFrequencyData() 方法

Baseline 已广泛支持

此特性已相当成熟,可在许多设备和浏览器版本上使用。自 ⁨2015 年 7 月⁩以来,各浏览器均已提供此特性。

AnalyserNode 接口的 getFloatFrequencyData() 方法会将当前的频率数据复制到一个传递给它的 Float32Array 数组中。

数组中的每个元素代表一个特定频率的分贝值。频率从 0 到采样率的 1/2 线性分布。例如,对于 48000 Hz 的采样率,数组的最后一个元素将代表 24000 Hz 的分贝值。

如果您需要更高的性能,并且不关心精度,可以使用 AnalyserNode.getByteFrequencyData() 方法,它操作的是一个 Uint8Array

语法

js
getFloatFrequencyData(array)

参数

array

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

返回值

无(undefined)。

示例

js
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);

绘制频谱

以下示例展示了如何使用 AudioContextMediaElementAudioSourceNode 连接到 AnalyserNode。在音频播放时,我们使用 requestAnimationFrame() 重复收集频率数据,并将其绘制到 <canvas> 元素上,绘制成“winamp 条形图风格”。

有关更完整的应用示例/信息,请查看我们的 Voice-change-O-matic 演示(相关代码请参见 app.js 的 108-193 行)。

js
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();

规范

规范
Web Audio API
# dom-analysernode-getfloatfrequencydata

浏览器兼容性

另见