AnalyserNode

Konstruktor

AnalyserNode()

Erstellt eine neue Instanz eines AnalyserNode Objekts.

Instanzeigenschaften

Erbt Eigenschaften von seinem Elternknoten, AudioNode.

AnalyserNode.fftSize

Ein Wert vom Typ unsigned long, der die Größe der FFT (Fast Fourier Transform) darstellt, die verwendet wird, um den Frequenzbereich zu bestimmen.

AnalyserNode.frequencyBinCount Schreibgeschützt

Ein Wert vom Typ unsigned long, der halb so groß ist wie die FFT-Größe. Dies entspricht im Allgemeinen der Anzahl der Datenwerte, mit denen Sie zur Visualisierung spielen können.

AnalyserNode.minDecibels

Ein Wert vom Typ double, der den minimalen Leistungswert im Skalierungsbereich für die FFT-Analyzedaten darstellt, zur Umwandlung in unvorzeichenbehaftete Byte-Werte — im Wesentlichen gibt dies den minimalen Wert für den Ergebnisbereich an, wenn getByteFrequencyData() verwendet wird.

AnalyserNode.maxDecibels

Ein Wert vom Typ double, der den maximalen Leistungswert im Skalierungsbereich für die FFT-Analyzedaten darstellt, zur Umwandlung in unvorzeichenbehaftete Byte-Werte — im Wesentlichen gibt dies den maximalen Wert für den Ergebnisbereich an, wenn getByteFrequencyData() verwendet wird.

AnalyserNode.smoothingTimeConstant

Ein Wert vom Typ double, der die Mittelungskonstante mit dem letzten Analyse-Frame darstellt — im Wesentlichen macht es den Übergang zwischen den Werten im Laufe der Zeit glatter.

Instanzmethoden

Erbt Methoden von seinem Elternknoten, AudioNode.

AnalyserNode.getFloatFrequencyData()

Kopiert die aktuellen Frequenzdaten in ein übergebenes Float32Array Array.

AnalyserNode.getByteFrequencyData()

Kopiert die aktuellen Frequenzdaten in ein übergebenes Uint8Array (unvorzeichenbehaftetes Byte-Array).

AnalyserNode.getFloatTimeDomainData()

Kopiert die aktuelle Wellenform oder Zeitbereichsdaten in ein übergebenes Float32Array Array.

AnalyserNode.getByteTimeDomainData()

Kopiert die aktuelle Wellenform oder Zeitbereichsdaten in ein übergebenes Uint8Array (unvorzeichenbehaftetes Byte-Array).

Beispiele

Grundlegende Nutzung

Das folgende Beispiel zeigt die grundlegende Nutzung eines AudioContext, um ein AnalyserNode zu erstellen, dann requestAnimationFrame und <canvas>, um Zeitbereichsdaten wiederholt zu sammeln und eine "Oszilloskop-ähnliche" Ausgabe des aktuellen Audioeingangs zu zeichnen. Für umfassendere angewandte Beispiele/Informationen, schauen Sie sich unser Voice-change-O-matic Demo an (siehe app.js Zeilen 108-193 für den relevanten Code).

const audioCtx = new AudioContext();

// …

const analyser = audioCtx.createAnalyser();
analyser.fftSize = 2048;

const bufferLength = analyser.frequencyBinCount;
const dataArray = new Uint8Array(bufferLength);
analyser.getByteTimeDomainData(dataArray);

// Connect the source to be analyzed
source.connect(analyser);

// Get a canvas defined with ID "oscilloscope"
const canvas = document.getElementById("oscilloscope");
const canvasCtx = canvas.getContext("2d");

// draw an oscilloscope of the current audio source

function draw() {
  requestAnimationFrame(draw);

  analyser.getByteTimeDomainData(dataArray);

  canvasCtx.fillStyle = "rgb(200 200 200)";
  canvasCtx.fillRect(0, 0, canvas.width, canvas.height);

  canvasCtx.lineWidth = 2;
  canvasCtx.strokeStyle = "rgb(0 0 0)";

  canvasCtx.beginPath();

  const sliceWidth = (canvas.width * 1.0) / bufferLength;
  let x = 0;

  for (let i = 0; i < bufferLength; i++) {
    const v = dataArray[i] / 128.0;
    const y = (v * canvas.height) / 2;

    if (i === 0) {
      canvasCtx.moveTo(x, y);
    } else {
      canvasCtx.lineTo(x, y);
    }

    x += sliceWidth;
  }

  canvasCtx.lineTo(canvas.width, canvas.height / 2);
  canvasCtx.stroke();
}

draw();

Spezifikationen

Browser-Kompatibilität

Siehe auch

• Die Verwendung der Web Audio API