BaseAudioContext: createAnalyser()-Methode

Baseline Weitgehend verfügbar

Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit April 2021 browserübergreifend verfügbar.

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.

In diesem Artikel

Syntax

createAnalyser()

Parameter

Keine.

Rückgabewert

Ein AnalyserNode.

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

Using the Web Audio API

Help improve MDN

War diese Übersetzung hilfreich?

Ja Nein

Erfahren Sie, wie Sie beitragen können Diese Seite wurde automatisch aus dem Englischen übersetzt.

Übersetzung auf GitHub anzeigen • Fehler mit dieser Übersetzung melden

Web Audio API
BaseAudioContext
Instanzeigenschaften
Instanzmethoden
Events
1. statechange
Vererbung
1. EventTarget
Verwandte Seiten für Web Audio API
Anleitungen
1. Verwendung der Web Audio API
2. Grundlegende Konzepte hinter der Web Audio API
3. Best Practices für die Web Audio API
4. Fortgeschrittene Techniken: Erstellen und Sequenzieren von Audio
5. Hintergrund-Audiobearbeitung mit AudioWorklet
6. Steuerung mehrerer Parameter mit ConstantSourceNode
7. Beispiel und Tutorial: Einfaches Synthesizer-Keyboard
8. Verwendung von IIR-Filtern
9. Visualisierungen mit Web Audio API
10. Grundlagen der Audio-Räumlichkeit im Web