For a project I work on, the designer had the idea of having real-time sound waves on the background of the application. Challenge accepted! See below the result of the first prototype.

The current implementation measures the energy of sound by doing fast Fourier transformations and sum the amplitudes of the frequency range between 2000 and 8000 Hertz. Then, to smooth out the jitters, the energy is stored in a small ring buffer, acting as low-pass filter. Then the energy value is used as scaling value for the regenerated visual waves.

(PS: Current version works only on Safari, not on Chrome due to the super bad implementation of canvas rendering in Chrome.)

Run Full Screen