AnalyserNode: frequencyBinCount-Eigenschaft

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.

Die frequencyBinCount-Schreibgeschützte Eigenschaft der AnalyserNode-Schnittstelle enthält die Gesamtanzahl der Datenpunkte, die für AudioContext sampleRate verfügbar sind. Dies entspricht der Hälfte des value der AnalyserNode.fftSize. Die Indizes der beiden Methoden stehen in linearer Beziehung zu den von ihnen repräsentierten Frequenzen, zwischen 0 und der Nyquist-Frequenz.

Wert

Ein vorzeichenloser Integer, der gleich der Anzahl der Werte ist, die AnalyserNode.getByteFrequencyData() und AnalyserNode.getFloatFrequencyData() in das bereitgestellte TypedArray kopieren.

Aus technischen Gründen, die mit der Definition der schnellen Fourier-Transformation zusammenhängen, beträgt dieser Wert immer die Hälfte des AnalyserNode.fftSize. Daher sind die möglichen Werte 16, 32, 64, 128, 256, 512, 1024, 2048, 4096, 8192 und 16384.

Beispiele

Das folgende Beispiel zeigt die grundlegende Verwendung eines AudioContext, um einen AnalyserNode zu erstellen, dann requestAnimationFrame und <canvas>, um wiederholt Frequenzdaten zu sammeln und eine "Winamp-Balkendiagramm-Darstellung" der aktuellen Audioeingabe zu zeichnen. Für vollständigere praktische Beispiele/Informationen sehen Sie sich unser Voice-change-O-matic Demo an.

js
const audioCtx = new AudioContext();
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();

Spezifikationen

Specification
Web Audio API
# dom-analysernode-frequencybincount

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch