AnalyserNode: frequencyBinCount-Eigenschaft
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 frequencyBinCount
-Schreibgeschützte Eigenschaft der AnalyserNode
-Schnittstelle enthält die Gesamtanzahl der Datenpunkte, die für AudioContext
sampleRate
verfügbar sind. Dies entspricht der Hälfte des value
der AnalyserNode.fftSize
. Die Indizes der beiden Methoden stehen in linearer Beziehung zu den von ihnen repräsentierten Frequenzen, zwischen 0 und der Nyquist-Frequenz.
Wert
Ein vorzeichenloser Integer, der gleich der Anzahl der Werte ist, die AnalyserNode.getByteFrequencyData()
und AnalyserNode.getFloatFrequencyData()
in das bereitgestellte TypedArray
kopieren.
Aus technischen Gründen, die mit der Definition der schnellen Fourier-Transformation zusammenhängen, beträgt dieser Wert immer die Hälfte des AnalyserNode.fftSize
. Daher sind die möglichen Werte 16
, 32
, 64
, 128
, 256
, 512
, 1024
, 2048
, 4096
, 8192
und 16384
.
Beispiele
Das folgende Beispiel zeigt die grundlegende Verwendung eines AudioContext
, um einen AnalyserNode
zu erstellen, dann requestAnimationFrame
und <canvas>
, um wiederholt Frequenzdaten zu sammeln und eine "Winamp-Balkendiagramm-Darstellung" der aktuellen Audioeingabe zu zeichnen.
Für vollständigere praktische Beispiele/Informationen sehen Sie sich unser Voice-change-O-matic Demo an.
const audioCtx = new AudioContext();
const analyser = audioCtx.createAnalyser();
analyser.minDecibels = -90;
analyser.maxDecibels = -10;
// …
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 - 1;
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;
}
}
draw();
Spezifikationen
Specification |
---|
Web Audio API # dom-analysernode-frequencybincount |
Browser-Kompatibilität
BCD tables only load in the browser