A small collection of experiments with the AnalyserNode in the Web Audio Api.
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.
A very basic spectrogram. Each row is one frame output of .getByteFrequencyData().
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.
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.
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 thedownsamples are multiplied together to create the Harmonic Product Spectrum. The detected pitch is the highestpeak of the Harmonic Product Spectrum.
Harmonic Product Spectrum mapped to piano keys.