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 ⁨Juli 2015⁩.

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

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.

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).

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();