smoothingTimeConstant
特性为
AnalyserNode
interface is a double value representing the averaging constant with the last analysis frame. It's basically an average between the current buffer and the last buffer the
AnalyserNode
processed, and results in a much smoother set of value changes over time.
var smoothValue = analyserNode.smoothingTimeConstant; analyserNode.smoothingTimeConstant = newValue;
A double within the range
0
to
1
(
0
meaning no time averaging). The default value is
0.8
.
If 0 is set, there is no averaging done, whereas a value of 1 means "overlap the previous and current buffer quite a lot while computing the value", which essentially smoothes the changes across
AnalyserNode.getFloatFrequencyData
/
AnalyserNode.getByteFrequencyData
调用。
In technical terms, we apply a Blackman window and smooth the values over time. The default value is good enough for most cases.
注意
: If a value outside the range 0–1 is set, an
INDEX_SIZE_ERR
exception is thrown.
The following example shows basic usage of an
AudioContext
to create an
AnalyserNode
,那么
requestAnimationFrame
and
<canvas>
to collect frequency data repeatedly and draw a "winamp bargraph 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).
If you are curious about the effect the
smoothingTimeConstant()
has, try cloning the above example and setting
analyser.smoothingTimeConstant = 0;
instead. You'll notice that the value changes are much more jarring.
var audioCtx = new (window.AudioContext || window.webkitAudioContext)();
var analyser = audioCtx.createAnalyser();
analyser.minDecibels = -90;
analyser.maxDecibels = -10;
analyser.smoothingTimeConstant = 0.85;
...
analyser.fftSize = 256;
var bufferLength = analyser.frequencyBinCount;
console.log(bufferLength);
var dataArray = new Uint8Array(bufferLength);
canvasCtx.clearRect(0, 0, WIDTH, HEIGHT);
function draw() {
drawVisual = requestAnimationFrame(draw);
analyser.getByteFrequencyData(dataArray);
canvasCtx.fillStyle = 'rgb(0, 0, 0)';
canvasCtx.fillRect(0, 0, WIDTH, HEIGHT);
var barWidth = (WIDTH / bufferLength) * 2.5;
var barHeight;
var x = 0;
for(var i = 0; i < bufferLength; i++) {
barHeight = dataArray[i];
canvasCtx.fillStyle = 'rgb(' + (barHeight+100) + ',50,50)';
canvasCtx.fillRect(x,HEIGHT-barHeight/2,barWidth,barHeight/2);
x += barWidth + 1;
}
};
draw();
| 规范 | 状态 | 注释 |
|---|---|---|
|
Web 音频 API
The definition of 'smoothingTimeConstant' in that specification. |
工作草案 |
| 桌面 | 移动 | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
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 |
完整支持
不支持
AnalyserNode
fftSize
frequencyBinCount
maxDecibels
minDecibels
smoothingTimeConstant
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