AnalyserNode: Methode getByteFrequencyData()

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 getByteFrequencyData()-Methode des AnalyserNode-Interfaces kopiert die aktuellen Frequenzdaten in ein übergebenes Uint8Array (unsigned byte array).

Die Frequenzdaten bestehen aus ganzen Zahlen auf einer Skala von 0 bis 255.

Jedes Element im Array repräsentiert den Dezibelwert für eine bestimmte Frequenz. Die Frequenzen sind linear von 0 bis zur Hälfte der Abtastrate verteilt. Bei einer Abtastrate von 48000 repräsentiert das letzte Element des Arrays zum Beispiel den Dezibelwert für 24000 Hz.

Wenn das Array weniger Elemente hat als AnalyserNode.frequencyBinCount, werden überschüssige Elemente verworfen. Wenn es mehr Elemente als benötigt hat, werden überschüssige Elemente ignoriert.

Syntax

js
getByteFrequencyData(array)

Parameter

array

Das Uint8Array, in das die Daten des Frequenzbereichs kopiert werden. Wenn das Array weniger Elemente hat als AnalyserNode.frequencyBinCount, werden überschüssige Elemente verworfen. Wenn es mehr Elemente als benötigt hat, werden überschüssige Elemente ignoriert.

Rückgabewert

Keiner (undefined).

Beispiele

Das folgende Beispiel zeigt die grundlegende Verwendung eines AudioContext, um einen AnalyserNode zu erstellen, dann requestAnimationFrame und ein <canvas>, um wiederholt Frequenzdaten zu sammeln und einen "Winamp-Balkendiagramm-Stil" als Ausgabe des aktuellen Audioeingangs zu zeichnen. Für vollständigere angewandte Beispiele/Informationen schauen Sie sich unser Voice-change-O-matic-Demo an (siehe app.js Zeilen 108–193 für relevanten Code).

js
const audioCtx = new AudioContext();
const analyser = audioCtx.createAnalyser();

// …

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

Spezifikationen

Specification
Web Audio API
# dom-analysernode-getbytefrequencydata

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch