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

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

Siehe auch