在此页

• 继承
• 构造函数
• 特性
• 方法
• 范例
• 规范
• 浏览器兼容性
• 另请参阅
• 相关话题

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.

输入数	1
输出数	1 (but may be left unconnected)
通道计数模式	"max"
通道计数	2
通道解释	"speakers"

继承

This interface inherits from the following parent interfaces:

  <div id="interfaceDiagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveAspectRatio="xMinYMin meet"><a xlink:href="../API/EventTarget.html" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#D4DDE4" stroke-width="2px" /><text  x="56" y="30" font-size="12px" font-family="Consolas,Monaco,Andale Mono,monospace" fill="#4D4E53" text-anchor="middle" alignment-baseline="middle">EventTarget</text></a><polyline points="111,25  121,20  121,30  111,25" stroke="#D4DDE4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#D4DDE4"/><a xlink:href="../API/AudioNode" target="_top"><rect x="151" y="1" width="90" height="50" fill="#fff" stroke="#D4DDE4" stroke-width="2px" /><text  x="196" y="30" font-size="12px" font-family="Consolas,Monaco,Andale Mono,monospace" fill="#4D4E53" text-anchor="middle" alignment-baseline="middle">AudioNode</text></a><polyline points="241,25  251,20  251,30  241,25" stroke="#D4DDE4" fill="none"/><line x1="251" y1="25" x2="281" y2="25" stroke="#D4DDE4"/><a xlink:href="../API/AnalyserNode" target="_top"><rect x="281" y="1" width="120" height="50" fill="#F4F7F8" stroke="#D4DDE4" stroke-width="2px" /><text  x="341" y="30" font-size="12px" font-family="Consolas,Monaco,Andale Mono,monospace" fill="#4D4E53" text-anchor="middle" alignment-baseline="middle">AnalyserNode</text></a></svg></div>
					

  a:hover text { fill: #0095DD; pointer-events: all;}
					

构造函数

AnalyserNode()

Creates a new instance of an AnalyserNode 对象。

特性

继承的特性来自其父级， 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.

方法

继承方法来自其父级 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 ，那么 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();
						

规范

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

浏览器兼容性

The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. 更新 GitHub 上的兼容性数据

	桌面						移动
	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

图例

完整支持

完整支持

不支持

不支持

另请参阅

• 使用 Web 音频 API

元数据

• 最后修改： 2020 年 3 月 9 日

相关话题

1. Web 音频 API
2. AnalyserNode
3. 构造函数

   1. AnalyserNode()
4. 特性

   1. fftSize
   2. frequencyBinCount
   3. maxDecibels
   4. minDecibels
   5. smoothingTimeConstant
5. 方法

   1. getByteFrequencyData()
   2. getByteTimeDomainData()
   3. getFloatFrequencyData()
   4. getFloatTimeDomainData()
6. 继承：

   1. AudioNode
   2. EventTarget
7. Related pages for Web Audio API

   1. AudioBuffer
   2. AudioBufferSourceNode
   3. AudioContext
   4. AudioContextOptions
   5. AudioDestinationNode
   6. AudioListener
   7. AudioNode
   8. AudioNodeOptions
   9. AudioParam
   10. AudioProcessingEvent
   11. AudioScheduledSourceNode
   12. AudioWorklet
   13. AudioWorkletGlobalScope
   14. AudioWorkletNode
   15. AudioWorkletProcessor
   16. BaseAudioContext
   17. BiquadFilterNode
   18. ChannelMergerNode
   19. ChannelSplitterNode
   20. ConstantSourceNode
   21. ConvolverNode
   22. DelayNode
   23. DynamicsCompressorNode
   24. GainNode
   25. IIRFilterNode
   26. MediaElementAudioSourceNode
   27. MediaStreamAudioDestinationNode
   28. MediaStreamAudioSourceNode
   29. OfflineAudioCompletionEvent
   30. OfflineAudioContext
   31. OscillatorNode
   32. PannerNode
   33. PeriodicWave
   34. StereoPannerNode
   35. WaveShaperNode