BaseAudioContext: createAnalyser()-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 createAnalyser()-Methode des BaseAudioContext-Interfaces erstellt ein AnalyserNode, welches verwendet werden kann, um Audio-Zeit- und Frequenzdaten offenzulegen und Datenvisualisierungen zu erstellen.

Hinweis: Der AnalyserNode()-Konstruktor wird empfohlen, um ein AnalyserNode zu erstellen; siehe Creating an AudioNode.

Hinweis: Weitere Informationen zur Verwendung dieses Knotens finden Sie auf der AnalyserNode-Seite.

Syntax

js
createAnalyser()

Parameter

Keine.

Rückgabewert

Beispiele

Das folgende Beispiel zeigt die grundlegende Verwendung eines AudioContext zur Erstellung eines Analyser-Knotens. Anschließend wird requestAnimationFrame() verwendet, 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 den relevanten Code).

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

// …

analyser.fftSize = 2048;
const bufferLength = analyser.frequencyBinCount;
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)";

  canvasCtx.beginPath();

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

  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(canvas.width, canvas.height / 2);
  canvasCtx.stroke();
}

draw();

Spezifikationen

Specification
Web Audio API
# dom-baseaudiocontext-createanalyser

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
createAnalyser

Legend

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

Full support
Full support

Siehe auch