getFloatTimeDomainData()
方法在
AnalyserNode
Interface copies the current waveform, or time-domain, data into a
Float32Array
array passed into it.
If the array has fewer elements than the
AnalyserNode.fftSize
, excess elements are dropped. If it has more elements than needed, excess elements are ignored.
var audioCtx = new AudioContext(); var analyser = audioCtx.createAnalyser(); var dataArray = new Float32Array(analyser.fftSize); // Float32Array needs to be the same length as the fftSize analyser.getFloatTimeDomainData(dataArray); // fill the Float32Array with data returned from getFloatTimeDomainData()
array
Float32Array
that the time domain data will be copied to.
AnalyserNode.frequencyBinCount
, excess elements are dropped. If it has more elements than needed, excess elements are ignored.
None.
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-float-data
demo (see the
源代码
too).
var audioCtx = new (window.AudioContext || window.webkitAudioContext)();
var analyser = audioCtx.createAnalyser();
...
analyser.fftSize = 1024;
var bufferLength = analyser.fftSize;
console.log(bufferLength);
var dataArray = new Float32Array(bufferLength);
canvasCtx.clearRect(0, 0, WIDTH, HEIGHT);
function draw() {
drawVisual = requestAnimationFrame(draw);
analyser.getFloatTimeDomainData(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] * 200.0;
var y = HEIGHT/2 + v;
if(i === 0) {
canvasCtx.moveTo(x, y);
} else {
canvasCtx.lineTo(x, y);
}
x += sliceWidth;
}
canvasCtx.lineTo(canvas.width, canvas.height/2);
canvasCtx.stroke();
};
draw();
Float32Array
that the time domain data will be copied to.
| 规范 | 状态 | 注释 |
|---|---|---|
|
Web 音频 API
The definition of 'getFloatTimeDomainData()' in that specification. |
工作草案 |
| 桌面 | 移动 | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
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 |
完整支持
不支持
AnalyserNode
getByteFrequencyData()
getByteTimeDomainData()
getFloatFrequencyData()
getFloatTimeDomainData()
AudioBuffer
AudioBufferSourceNode
AudioContext
AudioContextOptions
AudioDestinationNode
AudioListener
AudioNode
AudioNodeOptions
AudioParam
AudioProcessingEvent
AudioScheduledSourceNode
AudioWorklet
AudioWorkletGlobalScope
AudioWorkletNode
AudioWorkletProcessor
BaseAudioContext
BiquadFilterNode
ChannelMergerNode
ChannelSplitterNode
ConstantSourceNode
ConvolverNode
DelayNode
DynamicsCompressorNode
GainNode
IIRFilterNode
MediaElementAudioSourceNode
MediaStreamAudioDestinationNode
MediaStreamAudioSourceNode
OfflineAudioCompletionEvent
OfflineAudioContext
OscillatorNode
PannerNode
PeriodicWave
StereoPannerNode
WaveShaperNode