Skip to content

Instantly share code, notes, and snippets.

@oshoham oshoham/
Created Feb 4, 2016

What would you like to do?
Notes for 2/4/2016 RC Presentation

Visualizations in the Browser

Technologies Used

  • 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:

  1. Web Audio API Analyser Node is used to perform Fast Fourier Transform (FFT) on the current 10ms chunk of audio.
  2. Use FFT data (spectrum of 1024 frequency magnitudes) to determine if a beat has occurred (see next section).
  3. Draw 1-7 circles with radii based on the magnitudes of a few frequencies in the lower half of the frequency spectrum
  4. If a beat has occurred, randomly pick a new set of colors to display.

Simple Beat Detection Algorithm

  1. Keep track of a threshold level (this will vary over time).
  2. Bin the frequency spectrum into 16 levels and sum up the frequency magnitudes in each level.
  3. Get the average magnitude of all 16 levels.
  4. If the current average magnitude exceeds the threshold, then we have a beat. Set the new threshold to the current average magnitude.
  5. Reduce the threshold over time with a decay rate.
  6. Wait for a set hold time before detecting for the next beat, in order to avoid double counting the same beat (false positive).


Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.