AnalyserNode examples

A small collection of experiments with the AnalyserNode in the Web Audio API. All code available on GitHub

  1. Oscilloscope

    Taken directly from developer.mozilla.org "Visualizations with Web Audio API" article. Uses .getByteTimeDomainData() to generate the waveform and .getByteFrequencyData() to generate the frequency bar chart.

  2. Spectrogram

    A very basic spectrogram. Each row is one frame output of .getByteFrequencyData().

  3. Spectrogram with knobs

    A spectrogram with the four configurable properties of AnalyserNode exposed in the GUI. A good way to play with .fftSize .minDecibels .maxDecibels and .smoothingTimeConstant to get a feel for what they do.

  4. Spectrogram Explorer

    This little tool allows you to stop the spectrogram. You can then navigate row by row - adding labels to any interesting rows. Values are viewable in the browser console or can be exported to a csv file.

  5. Harmonic Product Spectrum

    Harmonic Product Spectrum is the simplest real time pitch detection algorithm. We take the initial FFT from .getByteFrequencyData() and then downsample it multiple times. The initial FFT and the downsamples are multiplied together to create the Harmonic Product Spectrum. The detected pitch is the highest peak of the Harmonic Product Spectrum.

  6. Pitch

    Harmonic Product Spectrum mapped to piano keys.