AnalyserNode: getFloatFrequencyData() Methode

Baseline Weitgehend verfügbar

Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit Juli 2015 browserübergreifend verfügbar.

Die getFloatFrequencyData() Methode der AnalyserNode Schnittstelle kopiert die aktuellen Frequenzdaten in ein Float32Array Array, das ihr übergeben wird.

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. Zum Beispiel, bei einer Abtastrate von 48000 Hz repräsentiert das letzte Element des Arrays den Dezibelwert für 24000 Hz.

Falls Sie höhere Leistung benötigen und Genauigkeit nicht wichtig ist, können Sie stattdessen AnalyserNode.getByteFrequencyData() verwenden, das mit einem Uint8Array arbeitet.

In diesem Artikel

Syntax

getFloatFrequencyData(array)

Parameter

array

Das Float32Array, in das die Frequenzbereichsdaten kopiert werden. Für jede stille Probe ist der Wert -Infinity. Wenn das Array weniger Elemente enthält als AnalyserNode.frequencyBinCount, werden überschüssige Elemente verworfen. Wenn es mehr Elemente enthält, als benötigt werden, werden überschüssige Elemente ignoriert.

Rückgabewert

Keiner (undefined).

Beispiele

js
const audioCtx = new AudioContext();
const analyser = audioCtx.createAnalyser();
// Float32Array should be the same length as the frequencyBinCount
const myDataArray = new Float32Array(analyser.frequencyBinCount);
// fill the Float32Array with data returned from getFloatFrequencyData()
analyser.getFloatFrequencyData(myDataArray);

Zeichnen eines Spektrums

Das folgende Beispiel zeigt die grundlegende Verwendung eines AudioContext, um einen MediaElementAudioSourceNode mit einem AnalyserNode zu verbinden. Während die Audioausgabe abgespielt wird, sammeln wir die Frequenzdaten wiederholt mit requestAnimationFrame() und zeichnen ein "Winamp-Balkendiagramm-Stil" auf ein <canvas> Element.

Für vollständigere angewandte Beispiele/Informationen sehen Sie sich unser Voice-change-O-matic Demo an (siehe app.js Zeilen 108–193 für relevanten Code).

js
const audioCtx = new AudioContext();

// Create audio source
// Here, we use an audio file, but this could also be e.g. microphone input
const audioEle = new Audio();
audioEle.src = "my-audio.mp3"; // Insert file name here
audioEle.autoplay = true;
audioEle.preload = "auto";
const audioSourceNode = audioCtx.createMediaElementSource(audioEle);

// Create analyser node
const analyserNode = audioCtx.createAnalyser();
analyserNode.fftSize = 256;
const bufferLength = analyserNode.frequencyBinCount;
const dataArray = new Float32Array(bufferLength);

// Set up audio node network
audioSourceNode.connect(analyserNode);
analyserNode.connect(audioCtx.destination);

// Create 2D canvas
const canvas = document.createElement("canvas");
canvas.style.position = "absolute";
canvas.style.top = "0";
canvas.style.left = "0";
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
document.body.appendChild(canvas);
const canvasCtx = canvas.getContext("2d");
canvasCtx.clearRect(0, 0, canvas.width, canvas.height);

function draw() {
  // Schedule next redraw
  requestAnimationFrame(draw);

  // Get spectrum data
  analyserNode.getFloatFrequencyData(dataArray);

  // Draw black background
  canvasCtx.fillStyle = "rgb(0 0 0)";
  canvasCtx.fillRect(0, 0, canvas.width, canvas.height);

  // Draw spectrum
  const barWidth = (canvas.width / bufferLength) * 2.5;
  let posX = 0;
  for (let i = 0; i < bufferLength; i++) {
    const barHeight = (dataArray[i] + 140) * 2;
    canvasCtx.fillStyle = `rgb(${Math.floor(barHeight + 100)} 50 50)`;
    canvasCtx.fillRect(
      posX,
      canvas.height - barHeight / 2,
      barWidth,
      barHeight / 2,
    );
    posX += barWidth + 1;
  }
}

draw();