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.
Syntax
var audioCtx = new AudioContext(); var analyser = audioCtx.createAnalyser(); var bufferLength = analyser.frequencyBinCount;
Value
An unsigned long integer.
Example
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();
Specifications
Specification | Status | Comment |
---|---|---|
Web Audio API The definition of 'frequencyBinCount' in that specification. |
Working Draft |
Browser compatibility
Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit) |
---|---|---|---|---|---|
Basic support | 10.0webkit | 25.0 (25.0) | Not supported | 15.0webkit 22 (unprefixed) |
6.0webkit |
Feature | Android | Firefox Mobile (Gecko) | Firefox OS | IE Mobile | Opera Mobile | Safari Mobile | Chrome for Android |
---|---|---|---|---|---|---|---|
Basic support | ? | 26.0 | 1.2 | ? | ? | ? | 33.0 |
See also
Document Tags and Contributors
Tags:
Contributors to this page:
teoli,
chrisdavidmills
Last updated by:
teoli,