AnalyserNode: getFloatTimeDomainData()-Methode

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 getFloatTimeDomainData()-Methode der AnalyserNode-Schnittstelle kopiert die aktuelle Wellenform- oder Zeitdomaindaten in ein übergebenes Float32Array-Array. Jeder Array-Wert ist eine Stichprobe, die die Größe des Signals zu einem bestimmten Zeitpunkt darstellt.

Syntax

js
getFloatTimeDomainData(array)

Parameter

array

Das Float32Array, in das die Zeitdomaindaten kopiert werden. Wenn das Array weniger Elemente hat als die AnalyserNode.fftSize, werden überschüssige Elemente entfernt. Wenn es mehr Elemente hat als benötigt, werden überschüssige Elemente ignoriert.

Rückgabewert

Keiner (undefined).

Beispiele

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

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

// …

analyser.fftSize = 1024;
const bufferLength = analyser.fftSize;
console.log(bufferLength);
const dataArray = new Float32Array(bufferLength);

canvasCtx.clearRect(0, 0, WIDTH, HEIGHT);

function draw() {
  drawVisual = requestAnimationFrame(draw);
  analyser.getFloatTimeDomainData(dataArray);

  canvasCtx.fillStyle = "rgb(200 200 200)";
  canvasCtx.fillRect(0, 0, WIDTH, HEIGHT);
  canvasCtx.lineWidth = 2;
  canvasCtx.strokeStyle = "rgb(0 0 0)";
  canvasCtx.beginPath();

  const sliceWidth = (WIDTH * 1.0) / bufferLength;
  let x = 0;

  for (let i = 0; i < bufferLength; i++) {
    const v = dataArray[i] * 200.0;
    const y = HEIGHT / 2 + v;

    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

Specification
Web Audio API
# dom-analysernode-getfloattimedomaindata

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch