AnalyserNode: frequencyBinCount プロパティ

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.

frequencyBinCountAnalyserNode インターフェイスの読み取り専用プロパティで、 AudioContextsampleRate で利用可能なデータポイントの総数が格納されます。これは AnalyserNode.fftSizevalue の半分です。 2 つのメソッドのインデックスは、0 からナイキスト周波数の間で、それらが表す周波数と線形関係にあります。

符号なし整数で、指定された TypedArray にコピーされる AnalyserNode.getByteFrequencyData()AnalyserNode.getFloatFrequencyData() が値の数に等しいものです。

高速フーリエ変換を定義する方法に関する技術的な理由から,常に AnalyserNode.fftSize の半分の値になります.したがって、 16, 32, 64, 128, 256, 512, 1024, 2048, 4096, 8192, 16384 のうちのいずれかになります。

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

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

// …

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 - 1;
  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;
  }
}

draw();

仕様書

Specification
Web Audio API
# dom-analysernode-frequencybincount

ブラウザーの互換性

BCD tables only load in the browser

関連情報