Click to start
Build a media player class that can be easily integrated, supporting media playback, SoundCloud streaming and getUserMedia streams, using Web Audio API.
It also uses AnalyserNode to perform an FFT, and can upload the spectrum to a GPU texture.
Can work together with kick detection.
Play | Use microphone
More details...
SoundCloud stream is done via their API, connecting the stream source to an HTMLAudioElement and creating a MediaElementSource from that.
The microphone can be used via navigator.getUserMedia<().
I didn't have time to implement media playback, it would be done with MediaElementSource, too.
All nodes are connected to an AnalyserNode and to the AudioContext destination.
The visualisation is done in a single draw call of particle-triangles, with the color from a gradient texture. Positions are updated in CPU, from the FFT data.
Credits
Song is People Without Mouths by Datassette
Coded using WebGL with three.js, the SoundCloud API and Odeo.js