AnalyserNode: getByteTimeDomainData()-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 getByteTimeDomainData()-Methode der AnalyserNode-Schnittstelle kopiert die aktuelle Wellenform- oder Zeitbereichsdaten in ein übergebenes Uint8Array (unsigned byte array).

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

Syntax

js
getByteTimeDomainData(array)

Parameter

array

Das Uint8Array, in das die Zeitbereichsdaten kopiert werden. Wenn das Array weniger Elemente hat als die AnalyserNode.fftSize, werden überschüssige Elemente verworfen. Wenn es mehr Elemente als benötigt hat, werden die überschüssigen Elemente ignoriert.

Rückgabewert

Keiner (undefined).

Beispiele

Das folgende Beispiel zeigt die grundlegende Verwendung eines AudioContext, um einen AnalyserNode zu erstellen, dann requestAnimationFrame und <canvas>, um wiederholt Zeitbereichsdaten zu sammeln und eine "Oszilloskop-Stil" Ausgabe des aktuellen Audioeingangs zu zeichnen. 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();
const analyser = audioCtx.createAnalyser();

// …

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

// draw an oscilloscope of the current audio source
function draw() {
  drawVisual = requestAnimationFrame(draw);
  analyser.getByteTimeDomainData(dataArray);

  canvasCtx.fillStyle = "rgb(200 200 200)";
  canvasCtx.fillRect(0, 0, WIDTH, HEIGHT);

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

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

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

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

    x += sliceWidth;
  }

  canvasCtx.lineTo(WIDTH, HEIGHT / 2);
  canvasCtx.stroke();
}

draw();

Spezifikationen

Specification
Web Audio API
# dom-analysernode-getbytetimedomaindata

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch