AnalyserNode: getFloatTimeDomainData() 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 getFloatTimeDomainData() Methode der AnalyserNode Schnittstelle kopiert die aktuelle Wellenform oder Zeitbereichsdaten in ein Float32Array Array, das ihr übergeben wird. Jeder Array-Wert ist eine Stichprobe, die Größe des Signals zu einem bestimmten Zeitpunkt.
Die Wellenform wird als PCM-Daten dargestellt, die einen nominalen Bereich von -1,0 bis 1,0 haben, aber Werte können den Bereich überschreiten, zum Beispiel beim Down-Mixing von Stereo auf Mono.
Syntax
getFloatTimeDomainData(array)
Parameter
array-
Das
Float32Array, in das die Zeitbereichsdaten kopiert werden. Wenn das Array weniger Elemente als dieAnalyserNode.fftSizehat, werden überzählige Elemente verworfen. Wenn es mehr Elemente als nötig hat, werden überzählige Elemente ignoriert.
Rückgabewert
Keiner (undefined).
Beispiele
Das folgende Beispiel zeigt die grundlegende Verwendung eines AudioContext, um einen AnalyserNode zu erstellen, und 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 schauen Sie sich unser Voice-change-O-matic Demo an (siehe app.js Zeilen 108–193 für den relevanten Code).
const audioCtx = new AudioContext();
const analyser = audioCtx.createAnalyser();
// …
analyser.fftSize = 1024;
const bufferLength = analyser.fftSize;
console.log(bufferLength);
const dataArray = new Float32Array(bufferLength);
canvasCtx.clearRect(0, 0, WIDTH, HEIGHT);
function draw() {
drawVisual = requestAnimationFrame(draw);
analyser.getFloatTimeDomainData(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] * 200.0;
const y = HEIGHT / 2 + v;
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-analysernode-getfloattimedomaindata |
Browser-Kompatibilität
Loading…