The frequencyBinCount
property of the AnalyserNode
interface is an unsigned long value half that of the FFT size. This generally equates to the number of data values you will have to play with for the visualization.
SyntaxEdit
var audioCtx = new AudioContext();
var analyser = audioCtx.createAnalyser();
var bufferLength = analyser.frequencyBinCount;
Value
An unsigned long integer.
ExampleEdit
The following example shows basic usage of an AudioContext
to create an AnalyserNode
, then requestAnimationFrame
and <canvas>
to collect frequency data repeatedly and draw a "winamp bargraph style" output of the current audio input. For more complete applied examples/information, check out our Voice-change-O-matic demo (see app.js lines 128–205 for relevant code).
var audioCtx = new (window.AudioContext || window.webkitAudioContext)();
var analyser = audioCtx.createAnalyser();
analyser.minDecibels = -90;
analyser.maxDecibels = -10;
...
analyser.fftSize = 256;
var bufferLength = analyser.frequencyBinCount;
console.log(bufferLength);
var 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);
var barWidth = (WIDTH / bufferLength) * 2.5;
var barHeight;
var x = 0;
for(var 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();
SpecificationsEdit
Specification | Status | Comment |
---|---|---|
Web Audio API The definition of 'frequencyBinCount' in that specification. |
Working Draft |
Browser compatibilityEdit
See alsoEdit
Document Tags and Contributors
Tags:
Contributors to this page:
teoli,
chrisdavidmills
Last updated by:
teoli,