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

ブラウザーの互換性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
frequencyBinCount

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

関連情報