Visualizations in the Browser
- Web Audio API (native browser audio playback & low-level DSP tools)
- SoundCloud public API
- RxJS (reactive functional programming JS library) (used for displaying SoundCloud search results)
- Canvas (native browser 2D drawing)
How It Works
Every ~10 ms:
- Web Audio API Analyser Node is used to perform Fast Fourier Transform (FFT) on the current 10ms chunk of audio.
- Use FFT data (spectrum of 1024 frequency magnitudes) to determine if a beat has occurred (see next section).
- Draw 1-7 circles with radii based on the magnitudes of a few frequencies in the lower half of the frequency spectrum
- If a beat has occurred, randomly pick a new set of colors to display.
Simple Beat Detection Algorithm
- Keep track of a threshold level (this will vary over time).
- Bin the frequency spectrum into 16 levels and sum up the frequency magnitudes in each level.
- Get the average magnitude of all 16 levels.
- If the current average magnitude exceeds the threshold, then we have a beat. Set the new threshold to the current average magnitude.
- Reduce the threshold over time with a decay rate.
- Wait for a set hold time before detecting for the next beat, in order to avoid double counting the same beat (false positive).