createAnalyser()
方法在
BaseAudioContext
interface creates an
AnalyserNode
, which can be used to expose audio time and frequency data and create data visualisations.
注意
: For more on using this node, see the
AnalyserNode
页面。
var analyserNode = baseAudioContext.createAnalyser();
The following example shows basic usage of an AudioContext to create an Analyser node, then use requestAnimationFrame() 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);
// draw an oscilloscope of the current audio source
function draw() {
drawVisual = requestAnimationFrame(draw);
analyser.getByteTimeDomainData(dataArray);
canvasCtx.fillStyle = 'rgb(200, 200, 200)';
canvasCtx.fillRect(0, 0, WIDTH, HEIGHT);
canvasCtx.lineWidth = 2;
canvasCtx.strokeStyle = 'rgb(0, 0, 0)';
canvasCtx.beginPath();
var sliceWidth = WIDTH * 1.0 / bufferLength;
var x = 0;
for(var i = 0; i < bufferLength; i++) {
var v = dataArray[i] / 128.0;
var y = v * 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 'createAnalyser()' in that specification. |
工作草案 |
| 桌面 | 移动 | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
createAnalyser
|
Chrome
10
Prefixed
|
Edge ≤18 |
Firefox
53
注意事项
|
IE 不支持 No |
Opera
22
|
Safari
6
Prefixed
|
WebView Android Yes | Chrome Android 33 |
Firefox Android
53
注意事项
|
Opera Android
22
|
Safari iOS
6
Prefixed
|
Samsung Internet Android 2.0 |
完整支持
不支持
见实现注意事项。
要求使用供应商前缀或不同名称。
BaseAudioContext
createAnalyser()
createBiquadFilter()
createBuffer()
createBufferSource()
createChannelMerger()
createChannelSplitter()
createConstantSource()
createConvolver()
createDelay()
createDynamicsCompressor()
createGain()
createIIRFilter()
createOscillator()
createPanner()
createPeriodicWave()
createScriptProcessor()
createStereoPanner()
createWaveShaper()
decodeAudioData()
AnalyserNode
AudioBuffer
AudioBufferSourceNode
AudioContext
AudioContextOptions
AudioDestinationNode
AudioListener
AudioNode
AudioNodeOptions
AudioParam
AudioProcessingEvent
AudioScheduledSourceNode
AudioWorklet
AudioWorkletGlobalScope
AudioWorkletNode
AudioWorkletProcessor
BiquadFilterNode
ChannelMergerNode
ChannelSplitterNode
ConstantSourceNode
ConvolverNode
DelayNode
DynamicsCompressorNode
GainNode
IIRFilterNode
MediaElementAudioSourceNode
MediaStreamAudioDestinationNode
MediaStreamAudioSourceNode
OfflineAudioCompletionEvent
OfflineAudioContext
OscillatorNode
PannerNode
PeriodicWave
StereoPannerNode
WaveShaperNode