AnalyserNode: getByteFrequencyData() 方法

Baseline 已广泛支持

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

AnalyserNode 接口的 getByteFrequencyData() 方法会将当前的频率数据复制到一个传递给它的 Uint8Array（无符号字节数组）中。

频率数据由 0 到 255 范围内的整数组成。

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

如果数组的元素数量少于 AnalyserNode.frequencyBinCount，则多余的元素将被丢弃。如果元素数量多于所需，则多余的元素将被忽略。

语法

getByteFrequencyData(array)

参数

array: 频率域数据将被复制到的 Uint8Array。如果数组的元素数量少于 AnalyserNode.frequencyBinCount，则多余的元素将被丢弃。如果元素数量多于所需，则多余的元素将被忽略。

下面的示例展示了如何使用 AudioContext 创建一个 AnalyserNode，然后使用 requestAnimationFrame 和 <canvas> 来反复收集频率数据，并绘制一个“Winamp 条形图风格”的当前音频输入的输出。有关更完整的实际示例/信息，请查看我们的 Voice-change-O-matic 演示（请参阅 app.js 的 108-193 行中的相关代码）。

const audioCtx = new AudioContext();
const analyser = audioCtx.createAnalyser();

// …

analyser.fftSize = 256;
const bufferLength = analyser.frequencyBinCount;
console.log(bufferLength);
const dataArray = new Uint8Array(bufferLength);

canvasCtx.clearRect(0, 0, WIDTH, HEIGHT);

function draw() {
  drawVisual = requestAnimationFrame(draw);

  analyser.getByteFrequencyData(dataArray);

  canvasCtx.fillStyle = "rgb(0 0 0)";
  canvasCtx.fillRect(0, 0, WIDTH, HEIGHT);

  const barWidth = (WIDTH / bufferLength) * 2.5;
  let barHeight;
  let x = 0;

  for (let i = 0; i < bufferLength; i++) {
    barHeight = dataArray[i];

    canvasCtx.fillStyle = `rgb(${barHeight + 100} 50 50)`;
    canvasCtx.fillRect(x, HEIGHT - barHeight / 2, barWidth, barHeight / 2);

    x += barWidth + 1;
  }
}

draw();