HTML5 audio tag with realtime javascript FFT visualization
Over the last couple weeks the #processing.js channel on IRC has been a buzz about David Humphrey’s experimental firefox patches which reveal live audio signal data to javascript. I was able to get a build compiled on my macbook and quickly whipped up this example in processing.js. This demo uses a FFT implemented in javascript and processes a 2048 sample buffer in realtime.
Ajaxian has the full story about how it all came about.
Understanding spectral leakage and window functions
Anyone who has worked with Fourier analysis of signals will know that spectral leakage can be a big problem when attempting to detect frequency peaks. Spectral leakage occurs during the conversion process from a time domain signal into frequency domain. It is important to know that this leakage is not an artifact but in fact a perfect sinusoidal representation of what the Fourier Transform has analyzed. The Fourier Transform expect truly periodic measured signal intervals in order to build the frequency domain representation of a perceived repetitive never ending signal. When the signal is not periodic in nature the Fourier Transform will introduce sharp discontinuities into the signal which are then processed into sinusoids. The spectral energy from these sinusoids spread across FFT bins from the fundamental frequency peak.
View the interactive demo (Processing applet).