The smoothingTimeConstant
property of the 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.
The smoothingTimeConstant
property's value defaults to 0.8
; it must be in the range 0
to 1
(0
meaning no time averaging). 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
calls.
In technical terms, we apply a Blackman window and smooth the values over time. The default value is good enough for most cases.
Note: If a value outside the range 0–1 is set, an INDEX_SIZE_ERR
exception is thrown.
Syntax
var audioCtx = new AudioContext(); var analyser = audioCtx.createAnalyser(); analyser.smoothingTimeConstant = 1;
Value
A double.
Example
The following example shows basic usage of an AudioContext
to create an AnalyserNode
, then 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();
Specifications
Specification | Status | Comment |
---|---|---|
Web Audio API The definition of 'smoothingTimeConstant' in that specification. |
Working Draft |
Browser compatibility
Feature | Chrome | Edge | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit) |
---|---|---|---|---|---|---|
Basic support | 10.0webkit | (Yes) | 25.0 (25.0) | No support | 15.0webkit 22 (unprefixed) |
6.0webkit |
Feature | Android | Edge | Firefox Mobile (Gecko) | Firefox OS | IE Mobile | Opera Mobile | Safari Mobile | Chrome for Android |
---|---|---|---|---|---|---|---|---|
Basic support | ? | (Yes) | 26.0 | 1.2 | ? | ? | ? | 33.0 |