AnalyserNode: smoothingTimeConstant プロパティ

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since April 2021.

smoothingTimeConstantAnalyserNode インターフェイスのプロパティで、最後の分析フレームとの平均化定数を表す double 値です。これは基本的に、現在のバッファーと AnalyserNode が処理した最後のバッファーとの間の平均であり、結果として、よりスムーズな時間による値の変化の集合になります。

doublet で、 0 から 1 までの範囲内です(0 は平均時間ではありません)。既定値は 0.8 です。

0 が設定されている場合、平均化は行われませんが、1 の値は「値を計算する間に前回と現在のバッファーがかなりオーバーラップする」ことを意味しており、実質的に AnalyserNode.getFloatFrequencyData/AnalyserNode.getByteFrequencyData 呼び出し間の変化を滑らかにします。

専門用語では、ブラックマンウィンドウを適用し、時間による値の変化を平滑化します。ほとんどの場合、既定値で十分です。

メモ: 0~1 の範囲の外の値を設定するには、 INDEX_SIZE_ERR 例外が発生します。

次の例では、 AudioContextAnalyserNode を作成し、 requestAnimationFrame<canvas> で時刻領域のデータを繰り返し収集し、現在の音声入力の「オシロスコープ」出力を描画する基本的な使用方法を示します。 より完全な応用例/情報については、 Voice-change-O-matic のデモを調べてください(関連するコードは app.js の 108 ~ 193 行目を参照)。

smoothingTimeConstant() が持つ効果に興味がある場合は、上記の例を複製して、代わりに analyser.smoothingTimeConstant = 0; を設定してみてください。値の変化がより激しくなることがわかるでしょう。

js
const audioCtx = new (window.AudioContext || window.webkitAudioContext)();
const analyser = audioCtx.createAnalyser();
analyser.minDecibels = -90;
analyser.maxDecibels = -10;
analyser.smoothingTimeConstant = 0.85;

// …

analyser.fftSize = 256;
const bufferLength = analyser.frequencyBinCount;
console.log(bufferLength);
const 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);

  const barWidth = (WIDTH / bufferLength) * 2.5;
  let barHeight;
  let x = 0;

  for (let 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();

仕様書

Specification
Web Audio API
# dom-analysernode-smoothingtimeconstant

ブラウザーの互換性

BCD tables only load in the browser

関連情報