Click to start
Build a media player class that can be easily integrated, supporting media playback, dropped files 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...
Playback is done by pointing an HTMLAudioElement at a file -bundled, remote with CORS headers, or dropped on the page- and creating a MediaElementSource from it.
The microphone can be used via navigator.getUserMedia<().
This originally streamed from SoundCloud, but their API now requires OAuth on every request, which a static page can't do.
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 i love she by Florian Filsinger, released by Acedia Music under CC BY 2.5. Play cycles through the other bundled tracks, and you can drop your own audio file on the page.
Coded using WebGL with three.js and Odeo.js