AnalyserNode

 AnalyserNode 接口表示了一个可以提供实时频域和时域分析信息的节点。它是一个不对音频流作任何改动的 AudioNode,同时允许你获取和处理它生成的数据,从而创建音频可视化。

AnalyzerNode 只有一个输入和输出,即使未连接到输出它也能正常工作。

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

输入数 1
输出数 1 (但可能是未连接的)
通道计数模式 "explicit"
通道数 1
通道解释 "speakers"

继承

继承自以下父接口:

构造函数

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

属性

继承属性自 AudioNode

AnalyserNode.fftSize
一个无符号长整形(unsigned long)的值,代表了用于计算频域信号时使用的 FFT (快速傅里叶变换) 的窗口大小。
AnalyserNode.frequencyBinCount 只读
一个无符号长整形(unsigned long)的值, 值为fftSize的一半。这通常等于将要用于可视化的数据值的数量。
AnalyserNode.minDecibels (en-US)
是一个双精度值,表示FFT分析频域数据并转换为无符号字节值时,对输入的功率数据的最小阈值 - 基本上,它限定了调用getByteFrequencyData()时结果范围的最小值
AnalyserNode.maxDecibels (en-US)
是一个双精度值,表示FFT分析频域数据并转换为无符号字节值时,对输入的功率数据的最大阈值 - 基本上,它限定了调用getByteFrequencyData()时结果范围的最大值
AnalyserNode.smoothingTimeConstant
是一个双精度浮点型(double)的值,表示最后一个分析帧的平均常数 — 基本上,它随时间使值之间的过渡更平滑。

方法

继承方法自 AudioNode.

AnalyserNode.getFloatFrequencyData()
将当前频域数据拷贝进Float32Array (en-US)数组。
AnalyserNode.getByteFrequencyData()
将当前频域数据拷贝进Uint8Array (en-US)数组(无符号字节数组)。
AnalyserNode.getFloatTimeDomainData() (en-US)
将当前波形,或者时域数据拷贝进Float32Array (en-US)数组。
AnalyserNode.getByteTimeDomainData()
将当前波形,或者时域数据拷贝进 Uint8Array (en-US)数组(无符号字节数组)。 

例子

注意:查看 Visualizations with Web Audio 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() {

  drawVisual = 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();

规范

Specification Status Comment
Web Audio API
AnalyserNode
Recommendation

浏览器兼容性

BCD tables only load in the browser

相关内容