[ Home ] [ Code ]

Music Visualization



This app attempts to visualize the idea of Discrete Fourier Transform intuitively with music signals.

Casually put, I see Fourier Transform as time-spanned inner/dot product of a signal with set of special correlation kernels (Fourier basis) that are orthogonal to among to the other kernels in the set. This operation allows a signal decomposed into multiple signals, which in turn the summation (superposition) of them recovers the original signal.
A skim through on DFT Matrix may give you a general idea of how the first principle of Discrete Fourier Transform might work.


Music players with visualizations are fun to look at because it is aesthetically pleasing. Being an engineer with knowledge of Fourier Tansforms and its relationship to audio signal processing, I was trying to find a visualization that catches both of aesthetic and mathematical visualization of music, but was not able to find one satisfying within my reach. So I created one myself for the sake of fun and practice.

Technical Limitations:
This app uses Web Audio API which does not provide phase/angle information on the complex number output of FFT but magnitudes. Therefore fully reconstructing the decomposed frequency components into corresponding waveforms is not possible using this API alone. Meanwhile the amplitude of the decomposed waveforms shown are truthful to that of data, the slow standing-wave-like oscillations are arbitrary dynamics induced using Low Frequency Oscillators (LFO) for aesthetics.
Known Issues:
Currently the audio starts clipping following subsequent loads of audio files.
Volume buttons not working on mobile (android).

This web app does not collect any of your data.
... or ...
Sample Music: Kubbi - Up In My Jam (No Copyright Music)