Skip to content

Instantly share code, notes, and snippets.

@oshoham

oshoham/notes.md

Created February 4, 2016 22:01
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save oshoham/8194516fbb55c7648d3e to your computer and use it in GitHub Desktop.
Save oshoham/8194516fbb55c7648d3e to your computer and use it in GitHub Desktop.
Download ZIP
Notes for 2/4/2016 RC Presentation
Raw
notes.md

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).

Inspiration

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment