mozilla
Your Search Results

    AnalyserNode.frequencyBinCount

    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

    Contributors to this page: teoli, chrisdavidmills
    Last updated by: teoli,