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

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
getFloatTimeDomainData

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

Siehe auch