AnalyserNode - 表示能够提供实时频率和时域分析信息的节点

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

一个 AnalyserNode 只有一个输入和一个输出。即使未连接输出，该节点也可以工作。

输入数量	1
输出数量	1 （但可能未连接）
通道计数模式	"max"
通道数	2
通道解释	"speakers"

继承

该接口从以下父接口继承：

构造函数

AnalyserNode()

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

属性

从其父接口 AudioNode 继承了属性。

AnalyserNode.fftSize

一个 unsigned long，表示 FFT（Fast Fourier Transform 快速傅立叶变换），大小用于确定频域。

AnalyserNode.frequencyBinCount 只读

一个 unsigned long，表示 FFT 大小一半。通常，这等于您必须为可视化处理的数据值的数量。

AnalyserNode.minDecibels

一个 double，表示 FFT 分析数据的缩放范围内的最小功率值，可转换为无符号字节值 - 基本上，这是使用 getByteFrequencyData() 时指定结果范围的最小值。

AnalyserNode.maxDecibels

一个 double，表示 FFT 分析数据的缩放范围内的最大功率值，可转换为无符号字节值 - 基本上，这是使用 getByteFrequencyData() 时指定结果范围的最大值。

AnalyserNode.smoothingTimeConstant

一个 double，表示最后一个分析帧的平均常数，基本上，它使随时间变化的值之间的过渡更加平滑。

方法

从其父接口 AudioNode 继承了方法。

AnalyserNode.getFloatFrequencyData()

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

AnalyserNode.getByteFrequencyData()

将当前频率数据复制到传递到其中的 Uint8Array（无符号字节数组）中。

AnalyserNode.getFloatTimeDomainData()

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

AnalyserNode.getByteTimeDomainData()

将当前波形或时域数据复制到传递到其中的 Uint8Array（无符号字节数组）中。

实例

注意：有关创建音频可视化的更多信息，请参见指南 使用 Web 音频 API 进行可视化。

基本用法

以下实例显示了使用 AudioContext 创建一个 AnalyserNode，然后依次使用 requestAnimationFrame 和 <canvas> 以重复收集时域数据并绘制当前音频输入的 “示波器样式” 输出。有关更完整的应用实例 / 信息，请查看我们的 Voice-change-O-matic 演示（请参阅 app.js 第 128–205 行）。

var audioCtx = new(window.AudioContext || window.webkitAudioContext)();
var analyser = audioCtx.createAnalyser();

// ...

analyser.fftSize = 2048;
var bufferLength = analyser.frequencyBinCount;
var dataArray = new Uint8Array(bufferLength);
analyser.getByteTimeDomainData(dataArray);

// 获取 ID 为 “oscilloscope” 的画布
var canvas = document.getElementById("oscilloscope");
var canvasCtx = canvas.getContext("2d");

// 绘制当前音频源的示波器
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();

  var sliceWidth = canvas.width * 1.0 / bufferLength;
  var x = 0;

  for (var i = 0; i < bufferLength; i++) {

    var v = dataArray[i] / 128.0;
    var 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 的定义	工作草案	-

桌面浏览器兼容性

移动浏览器兼容性

相关链接

• 使用网络音频 API