AnalyserNode
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.
Please take two minutes to fill out our short survey.
Die AnalyserNode
-Schnittstelle repräsentiert einen Knoten, der in der Lage ist, Echtzeit-Informationen zur Frequenz- und Zeitbereichsanalyse bereitzustellen. Sie ist ein AudioNode
, der den Audiostream unverändert vom Eingang zum Ausgang durchlaufen lässt, es Ihnen jedoch ermöglicht, die erzeugten Daten zu nutzen, zu verarbeiten und Audio-Visualisierungen zu erstellen.
Ein AnalyserNode
hat genau einen Eingang und einen Ausgang. Der Knoten funktioniert auch, wenn der Ausgang nicht verbunden ist.
Anzahl der Eingänge | 1 |
---|---|
Anzahl der Ausgänge | 1 (kann jedoch nicht verbunden bleiben) |
Channel-Count-Modus | "max" |
Channel-Anzahl | 2 |
Channel-Interpretation | "speakers" |
Konstruktor
AnalyserNode()
-
Erstellt eine neue Instanz eines
AnalyserNode
-Objekts.
Instanz-Eigenschaften
Erbt Eigenschaften von seinem Elternteil, AudioNode
.
AnalyserNode.fftSize
-
Ein unsigned long-Wert, der die Größe der FFT (Fast Fourier Transform) darstellt, die verwendet wird, um den Frequenzbereich zu bestimmen.
AnalyserNode.frequencyBinCount
Schreibgeschützt-
Ein unsigned long-Wert, der die Hälfte der FFT-Größe beträgt. Dies entspricht im Allgemeinen der Anzahl der Datenwerte, die Sie für die Visualisierung verwenden können.
AnalyserNode.minDecibels
-
Ein double-Wert, der den minimalen Leistungswert im Skalierungsbereich für die FFT-Analysedaten darstellt, zur Umwandlung in unsigned Byte-Werte — im Grunde gibt dies den Mindestwert für den Bereich der Ergebnisse an, wenn
getByteFrequencyData()
verwendet wird. AnalyserNode.maxDecibels
-
Ein double-Wert, der den maximalen Leistungswert im Skalierungsbereich für die FFT-Analysedaten darstellt, zur Umwandlung in unsigned Byte-Werte — im Grunde gibt dies den Maximalwert für den Bereich der Ergebnisse an, wenn
getByteFrequencyData()
verwendet wird. AnalyserNode.smoothingTimeConstant
-
Ein double-Wert, der die Mittelungskonstante mit dem letzten Analyse-Frame darstellt — im Wesentlichen wird der Übergang zwischen Werten über die Zeit sanfter gestaltet.
Instanz-Methoden
Erbt Methoden von seinem Elternteil, AudioNode
.
AnalyserNode.getFloatFrequencyData()
-
Kopiert die aktuellen Frequenzdaten in ein
Float32Array
-Array, das an die Methode übergeben wird. AnalyserNode.getByteFrequencyData()
-
Kopiert die aktuellen Frequenzdaten in ein
Uint8Array
(Unsigned Byte-Array), das an die Methode übergeben wird. AnalyserNode.getFloatTimeDomainData()
-
Kopiert die aktuelle Wellenform oder Zeitbereichsdaten in ein
Float32Array
-Array, das an die Methode übergeben wird. AnalyserNode.getByteTimeDomainData()
-
Kopiert die aktuelle Wellenform oder Zeitbereichsdaten in ein
Uint8Array
(Unsigned Byte-Array), das an die Methode übergeben wird.
Beispiele
Hinweis: Siehe den Leitfaden Visualisierungen mit der Web Audio API für weitere Informationen zur Erstellung von Audiovisualisierungen.
Grundlegende Nutzung
Das folgende Beispiel zeigt die grundlegende Nutzung eines AudioContext
, um einen AnalyserNode
zu erstellen, gefolgt von einer Nutzung von requestAnimationFrame
und einem <canvas>
, um auf wiederholende Weise Zeitbereichsdaten zu sammeln und eine "Oszilloskop-ähnliche" Ausgabe des aktuellen Audioeingangs zu zeichnen.
Für vollständigere angewandte Beispiele/Informationen besuchen Sie unser Voice-change-O-matic Demo (siehe app.js Zeilen 108-193 für relevanten Code).
const audioCtx = new AudioContext();
// …
const analyser = audioCtx.createAnalyser();
analyser.fftSize = 2048;
const bufferLength = analyser.frequencyBinCount;
const dataArray = new Uint8Array(bufferLength);
analyser.getByteTimeDomainData(dataArray);
// Connect the source to be analyzed
source.connect(analyser);
// Get a canvas defined with ID "oscilloscope"
const canvas = document.getElementById("oscilloscope");
const canvasCtx = canvas.getContext("2d");
// draw an oscilloscope of the current audio source
function draw() {
requestAnimationFrame(draw);
analyser.getByteTimeDomainData(dataArray);
canvasCtx.fillStyle = "rgb(200 200 200)";
canvasCtx.fillRect(0, 0, canvas.width, canvas.height);
canvasCtx.lineWidth = 2;
canvasCtx.strokeStyle = "rgb(0 0 0)";
canvasCtx.beginPath();
const sliceWidth = (canvas.width * 1.0) / bufferLength;
let x = 0;
for (let i = 0; i < bufferLength; i++) {
const v = dataArray[i] / 128.0;
const y = (v * canvas.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 # AnalyserNode |