index.html

---
title: AnalyserNode.smoothingTimeConstant
slug: Web/API/AnalyserNode/smoothingTimeConstant
tags:
  - API
  - AnalyserNode
  - Property
  - Reference
  - Web Audio API
  - smoothingTimeConstant
browser-compat: api.AnalyserNode.smoothingTimeConstant
---
<p>{{ APIRef("Web Audio API") }}</p>

<p>The <strong><code>smoothingTimeConstant</code></strong> property of the {{ domxref("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 <code>AnalyserNode</code> processed, and results in a much smoother set of value changes over time.</p>

<h2 id="Syntax">Syntax</h2>

<pre class="brush: js">var <em>smoothValue</em> = <em>analyserNode</em>.smoothingTimeConstant;
<em>analyserNode</em>.smoothingTimeConstant = <em>newValue</em>;
</pre>

<h3 id="Value">Value</h3>

<p>A double within the range <code>0</code> to <code>1</code> (<code>0</code> meaning no time averaging). The default value is <code>0.8</code>.</p>

<p>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 smooths the changes across {{domxref("AnalyserNode.getFloatFrequencyData")}}/{{domxref("AnalyserNode.getByteFrequencyData")}} calls.</p>

<p>In technical terms, we apply a <a href="https://webaudio.github.io/web-audio-api/#blackman-window">Blackman window</a> and smooth the values over time. The default value is good enough for most cases.</p>

<div class="note">
<p><strong>Note:</strong> If a value outside the range 0–1 is set, an <code>INDEX_SIZE_ERR</code> exception is thrown.</p>
</div>

<h2 id="Example">Example</h2>

<p>The following example shows basic usage of an {{domxref("AudioContext")}} to create an <code>AnalyserNode</code>, then {{domxref("window.requestAnimationFrame()","requestAnimationFrame")}} and {{htmlelement("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 <a href="https://mdn.github.io/voice-change-o-matic/">Voice-change-O-matic</a> demo (see <a href="https://github.com/mdn/voice-change-o-matic/blob/gh-pages/scripts/app.js#L128-L205">app.js lines 128–205</a> for relevant code).</p>

<p>If you are curious about the effect the <code>smoothingTimeConstant()</code> has, try cloning the above example and setting <code>analyser.smoothingTimeConstant = 0;</code> instead. You'll notice that the value changes are much more jarring.</p>

<pre class="brush: js">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 &lt; 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();</pre>

<h2 id="Specifications">Specifications</h2>

{{Specifications}}

<h2 id="Browser_compatibility">Browser compatibility</h2>

<p>{{Compat}}</p>

<h2 id="See_also">See also</h2>

<ul>
 <li><a href="/en-US/docs/Web/API/Web_Audio_API/Using_Web_Audio_API">Using the Web Audio API</a></li>
</ul>