AnalyserNode

AnalyserNode interface represents a node able to provide real-time frequency and time-domain analysis information. It is an AudioNode that passes the audio stream unchanged from the input to the output, but allows you to take the generated data, process it, and create audio visualizations.

An AnalyserNode has exactly one input and one output. The node works even if the output is not connected.

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

Number of inputs 1
Number of outputs 1 (but may be left unconnected)
Channel count mode "max"
Channel count 2
Channel interpretation "speakers"

继承

This interface inherits from the following parent interfaces:

构造函数

AnalyserNode()
Creates a new instance of an AnalyserNode 对象。

特性

Inherits properties from its parent, AudioNode .

AnalyserNode.fftSize
Is an unsigned long value representing the size of the FFT ( Fast Fourier Transform ) to be used to determine the frequency domain.
AnalyserNode.frequencyBinCount 只读
Is an unsigned long value half that of the FFT size. This generally equates to the number of data values you will have to play with for the visualization.
AnalyserNode.minDecibels
Is a double value representing the minimum power value in the scaling range for the FFT analysis data, for conversion to unsigned byte values — basically, this specifies the minimum value for the range of results when using getByteFrequencyData() .
AnalyserNode.maxDecibels
Is a double value representing the maximum power value in the scaling range for the FFT analysis data, for conversion to unsigned byte values — basically, this specifies the maximum value for the range of results when using getByteFrequencyData() .
AnalyserNode.smoothingTimeConstant
Is a double value representing the averaging constant with the last analysis frame — basically, it makes the transition between values over time smoother.

方法

Inherits methods from its parent, AudioNode .

AnalyserNode.getFloatFrequencyData()
Copies the current frequency data into a Float32Array array passed into it.
AnalyserNode.getByteFrequencyData()
Copies the current frequency data into a Uint8Array (unsigned byte array) passed into it.
AnalyserNode.getFloatTimeDomainData()
Copies the current waveform, or time-domain, data into a Float32Array array passed into it.
AnalyserNode.getByteTimeDomainData()
Copies the current waveform, or time-domain, data into a Uint8Array (unsigned byte array) passed into it.

范例

注意 : See the guide Visualizations with Web Audio API for more information on creating audio visualizations.

基本用法

The following example shows basic usage of an AudioContext to create an AnalyserNode , then requestAnimationFrame and <canvas> to collect time domain data repeatedly and draw an "oscilloscope style" output of the current audio input. For more complete applied examples/information, check out our Voice-change-O-matic demo (see app.js lines 128–205 for relevant code).

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);
// Get a canvas defined with ID "oscilloscope"
var canvas = document.getElementById("oscilloscope");
var 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();
  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();
					

规范

规范 状态 Comment
Web 音频 API
The definition of 'AnalyserNode' in that specification.
工作草案

浏览器兼容性

更新 GitHub 上的兼容性数据
Desktop Mobile
Chrome Edge Firefox Internet Explorer Opera Safari Android webview Chrome for Android Firefox for Android Opera for Android Safari on iOS Samsung Internet
AnalyserNode Chrome 14 Edge ≤18 Firefox 25 IE 不支持 No Opera 15 Safari 6 WebView Android Yes Chrome Android 18 Firefox Android 26 Opera Android 14 Safari iOS 6 Samsung Internet Android 1.0
AnalyserNode() 构造函数 Chrome 55 Edge ≤79 Firefox 53 IE 不支持 No Opera 42 Safari 6 WebView Android 55 Chrome Android 55 Firefox Android 53 Opera Android 42 Safari iOS 6 Samsung Internet Android 6.0
fftSize Chrome 14 Edge 12 Firefox 25 IE 不支持 No Opera 15 Safari 6 WebView Android Yes Chrome Android 18 Firefox Android 26 Opera Android 14 Safari iOS 6 Samsung Internet Android 1.0
frequencyBinCount Chrome 14 Edge 12 Firefox 25 IE 不支持 No Opera 15 Safari 6 WebView Android Yes Chrome Android 18 Firefox Android 26 Opera Android 14 Safari iOS 6 Samsung Internet Android 1.0
getByteFrequencyData Chrome 14 Edge 12 Firefox 25 IE 不支持 No Opera 15 Safari 6 WebView Android Yes Chrome Android 18 Firefox Android 26 Opera Android 14 Safari iOS 6 Samsung Internet Android 1.0
getByteTimeDomainData Chrome 14 Edge 12 Firefox 25 IE 不支持 No Opera 15 Safari 6 WebView Android Yes Chrome Android 18 Firefox Android 26 Opera Android 14 Safari iOS 6 Samsung Internet Android 1.0
getFloatFrequencyData Chrome 14 Edge 12 Firefox 25 IE 不支持 No Opera 15 Safari 6 WebView Android Yes Chrome Android 18 Firefox Android 26 Opera Android 14 Safari iOS 6 Samsung Internet Android 1.0
getFloatTimeDomainData Chrome 14 Edge 12 Firefox 25 IE 不支持 No Opera 15 Safari 不支持 No WebView Android Yes Chrome Android 18 Firefox Android 26 Opera Android 14 Safari iOS 不支持 No Samsung Internet Android 1.0
maxDecibels Chrome 14 Edge 12 Firefox 25 IE 不支持 No Opera 15 Safari 6 WebView Android Yes Chrome Android 18 Firefox Android 26 Opera Android 14 Safari iOS 6 Samsung Internet Android 1.0
minDecibels Chrome 14 Edge 12 Firefox 25 IE 不支持 No Opera 15 Safari 6 WebView Android Yes Chrome Android 18 Firefox Android 26 Opera Android 14 Safari iOS 6 Samsung Internet Android 1.0
smoothingTimeConstant Chrome 14 Edge 12 Firefox 25 IE 不支持 No Opera 15 Safari 6 WebView Android Yes Chrome Android 18 Firefox Android 26 Opera Android 14 Safari iOS 6 Samsung Internet Android 1.0

图例

完整支持
完整支持
不支持
不支持

另请参阅