mozilla
Your Search Results

    AnalyserNode

    The AnalyserNode interface represents a node able to provide real-time frequency and time-domain analysis information. It is an AudioNode that passes the audio stream unchanged from the input to the output, but allows you to take the generated data, process it, and create audio visualizations.

    An AnalyzerNode has exactly one input and one output. The node works even if the output is not connected.

    Without modifying the audio stream, the node allows to get the frequency and time-domain data associated to it, using a FFT.

    • Number of inputs 1
    • Number of outputs 1 (but may be left unconnected)
    • Channel count mode "explicit"
    • Channel count 1
    • Channel interpretation "speakers"

    Note: See the guide Visualizations with Web Audio API for more information on creating audio visualizations.

    Properties

    Inherits properties from its parent, AudioNode.

    AnalyserNode.fftSize
    Is an unsigned long value representing the size of the FFT (Fast Fourier Transform) to be used to determine the frequency domain.
    AnalyserNode.frequencyBinCount Read only
    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.
    AnalyserNode.minDecibels
    Is a double value representing the minimum power value in the scaling range for the FFT analysis data, for conversion to unsigned byte values — basically, this specifies the minimum value for the range of results when using getByteFrequencyData().
    AnalyserNode.maxDecibels
    Is a double value representing the maximum power value in the scaling range for the FFT analysis data, for conversion to unsigned byte values — basically, this specifies the maximum value for the range of results when using getByteFrequencyData().
    AnalyserNode.smoothingTimeConstant
    Is a double value representing the averaging constant with the last analysis frame — basically, it makes the transition between values over time smoother.

    Methods

    Inherits methods from its parent, AudioNode.

    AnalyserNode.getFloatFrequencyData()
    Copies the current frequency data into a Float32Array array passed into it.
    AnalyserNode.getByteFrequencyData()
    Copies the current frequency data into a Uint8Array (unsigned byte array) passed into it.
    AnalyserNode.getFloatTimeDomainData()
    Copies the current waveform, or time-domain, data into a Float32Array array passed into it.
    AnalyserNode.getByteTimeDomainData()
    Copies the current waveform, or time-domain, data into a Uint8Array (unsigned byte array) passed into it.

    Example

    The following example shows basic usage of an AudioContext to create an AnalyserNode, then requestAnimationFrame and <canvas> to collect time domain data repeatedly and draw an "oscilloscope 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.fftSize = 2048;
    var bufferLength = analyser.frequencyBinCount;
    var dataArray = new Uint8Array(bufferLength);
    analyser.getByteTimeDomainData(dataArray);
    
    // draw an oscilloscope of the current audio source
    
    function draw() {
    
          drawVisual = requestAnimationFrame(draw);
    
          analyser.getByteTimeDomainData(dataArray);
    
          canvasCtx.fillStyle = 'rgb(200, 200, 200)';
          canvasCtx.fillRect(0, 0, WIDTH, HEIGHT);
    
          canvasCtx.lineWidth = 2;
          canvasCtx.strokeStyle = 'rgb(0, 0, 0)';
    
          canvasCtx.beginPath();
    
          var sliceWidth = WIDTH * 1.0 / bufferLength;
          var x = 0;
    
          for(var i = 0; i < bufferLength; i++) {
       
            var v = dataArray[i] / 128.0;
            var y = v * HEIGHT/2;
    
            if(i === 0) {
              canvasCtx.moveTo(x, y);
            } else {
              canvasCtx.lineTo(x, y);
            }
    
            x += sliceWidth;
          }
    
          canvasCtx.lineTo(canvas.width, canvas.height/2);
          canvasCtx.stroke();
        };
    
        draw();

    Specifications

    Specification Status Comment
    Web Audio API
    The definition of 'AnalyserNode' 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

    Last updated by: fscholz,