Baseline Widely available
Die getByteFrequencyData()-Methode des AnalyserNode-Interfaces kopiert die aktuellen Frequenzdaten in ein übergebenes Uint8Array (unsigned byte array).
Die Frequenzdaten bestehen aus ganzen Zahlen auf einer Skala von 0 bis 255.
Jedes Element im Array repräsentiert den Dezibelwert für eine bestimmte Frequenz. Die Frequenzen sind linear von 0 bis zur Hälfte der Abtastrate verteilt. Bei einer Abtastrate von 48000 repräsentiert das letzte Element des Arrays zum Beispiel den Dezibelwert für 24000 Hz.
Wenn das Array weniger Elemente hat als AnalyserNode.frequencyBinCount, werden überschüssige Elemente verworfen. Wenn es mehr Elemente als benötigt hat, werden überschüssige Elemente ignoriert.
getByteFrequencyData(array)
array
Das Uint8Array, in das die Daten des Frequenzbereichs kopiert werden. Wenn das Array weniger Elemente hat als AnalyserNode.frequencyBinCount, werden überschüssige Elemente verworfen. Wenn es mehr Elemente als benötigt hat, werden überschüssige Elemente ignoriert.
Keiner (undefined).
Das folgende Beispiel zeigt die grundlegende Verwendung eines AudioContext, um einen AnalyserNode zu erstellen, dann requestAnimationFrame und ein <canvas>, um wiederholt Frequenzdaten zu sammeln und einen "Winamp-Balkendiagramm-Stil" als 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 relevanten Code).
const audioCtx = new AudioContext();
const analyser = audioCtx.createAnalyser();
// â¦
analyser.fftSize = 256;
const bufferLength = analyser.frequencyBinCount;
console.log(bufferLength);
const dataArray = new Uint8Array(bufferLength);
canvasCtx.clearRect(0, 0, WIDTH, HEIGHT);
function draw() {
drawVisual = requestAnimationFrame(draw);
analyser.getByteFrequencyData(dataArray);
canvasCtx.fillStyle = "rgb(0 0 0)";
canvasCtx.fillRect(0, 0, WIDTH, HEIGHT);
const barWidth = (WIDTH / bufferLength) * 2.5;
let barHeight;
let x = 0;
for (let i = 0; i < bufferLength; i++) {
barHeight = dataArray[i];
canvasCtx.fillStyle = `rgb(${barHeight + 100} 50 50)`;
canvasCtx.fillRect(x, HEIGHT - barHeight / 2, barWidth, barHeight / 2);
x += barWidth + 1;
}
}
draw();
Diese Seite wurde automatisch aus dem Englischen übersetzt.
RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4