AnalyserNode

基线 广泛可用

此功能已得到良好确立,并且可在许多设备和浏览器版本上运行。它自以下时间起在浏览器中可用 2021 年 4 月.

AnalyserNode 接口表示能够提供实时频率和时域分析信息的节点。它是一个 AudioNode,它将音频流从输入到输出不变地传递,但允许你获取生成的数据,处理它并创建音频可视化。

一个 AnalyserNode 恰好有一个输入和一个输出。即使输出未连接,该节点也能工作。

Without modifying the audio stream, the node allows to get the frequency and time-domain data associated to it, using a FFT.

EventTarget AudioNode AnalyserNode
输入数量 1
输出数量 1(但可以不连接)
通道计数模式 "max"
通道数量 2
通道解释 "speakers"

构造函数

AnalyserNode()

创建一个新的 AnalyserNode 对象实例。

实例属性

继承自其父级 AudioNode 的属性.

AnalyserNode.fftSize

一个无符号长整数值,表示用于确定频域的 FFT (快速傅里叶变换) 的大小。

AnalyserNode.frequencyBinCount 只读

一个无符号长整数值,是 FFT 大小的一半。这通常等于你将用于可视化的数据值的数量。

AnalyserNode.minDecibels

一个双精度浮点数,表示 FFT 分析数据缩放范围中的最小功率值,用于转换为无符号字节值——基本上,这指定了使用 getByteFrequencyData() 时结果范围的最小值。

AnalyserNode.maxDecibels

一个双精度浮点数,表示 FFT 分析数据缩放范围中的最大功率值,用于转换为无符号字节值——基本上,这指定了使用 getByteFrequencyData() 时结果范围的最大值。

AnalyserNode.smoothingTimeConstant

一个双精度浮点数,表示与最后一个分析帧的平均常数——基本上,它使随时间推移的值之间的过渡更加平滑。

实例方法

继承自其父级 AudioNode 的方法.

AnalyserNode.getFloatFrequencyData()

将当前频率数据复制到传递给它的 Float32Array 数组中。

AnalyserNode.getByteFrequencyData()

将当前频率数据复制到传递给它的 Uint8Array(无符号字节数组)中。

AnalyserNode.getFloatTimeDomainData()

将当前波形或时域数据复制到传递给它的 Float32Array 数组中。

AnalyserNode.getByteTimeDomainData()

将当前波形或时域数据复制到传递给它的 Uint8Array(无符号字节数组)中。

示例

注意:有关创建音频可视化的更多信息,请参阅指南 使用 Web Audio API 进行可视化

基本用法

以下示例显示了 AudioContext 的基本用法来创建 AnalyserNode,然后使用 requestAnimationFrame<canvas> 反复收集时域数据并绘制当前音频输入的“示波器样式”输出。有关更完整的应用示例/信息,请查看我们的 Voice-change-O-matic 演示(有关相关代码,请参阅 app.js 第 108-193 行)。

js
const audioCtx = new AudioContext();

// …

const analyser = audioCtx.createAnalyser();
analyser.fftSize = 2048;

const bufferLength = analyser.frequencyBinCount;
const dataArray = new Uint8Array(bufferLength);
analyser.getByteTimeDomainData(dataArray);

// Connect the source to be analysed
source.connect(analyser);

// Get a canvas defined with ID "oscilloscope"
const canvas = document.getElementById("oscilloscope");
const canvasCtx = canvas.getContext("2d");

// draw an oscilloscope of the current audio source

function draw() {
  requestAnimationFrame(draw);

  analyser.getByteTimeDomainData(dataArray);

  canvasCtx.fillStyle = "rgb(200 200 200)";
  canvasCtx.fillRect(0, 0, canvas.width, canvas.height);

  canvasCtx.lineWidth = 2;
  canvasCtx.strokeStyle = "rgb(0 0 0)";

  canvasCtx.beginPath();

  const sliceWidth = (canvas.width * 1.0) / bufferLength;
  let x = 0;

  for (let i = 0; i < bufferLength; i++) {
    const v = dataArray[i] / 128.0;
    const y = (v * canvas.height) / 2;

    if (i === 0) {
      canvasCtx.moveTo(x, y);
    } else {
      canvasCtx.lineTo(x, y);
    }

    x += sliceWidth;
  }

  canvasCtx.lineTo(canvas.width, canvas.height / 2);
  canvasCtx.stroke();
}

draw();

规范

规范
Web Audio API
# AnalyserNode

浏览器兼容性

BCD 表仅在启用 JavaScript 的浏览器中加载。

另请参阅