web audio threejs starter
A free web demo — play it in your browser, no install. Minimal React Three Fiber starter for local, audio-reactive 3D visuals with the Web Audio API.
Vote and save it — continue with GitHub or sign in free
Made this, @7g3n? See how many people played it → or use email
GitHub asks to share your profile and email with us. We never post anything.
No account needed to save ♥ or react 🔥: they’re under the game. Or vote with email.
Open the live demo Source on GitHubFrom the README
A minimal React starter for turning a local audio file into audio-reactive 3D visuals with the Web Audio API, Three.js, and React Three Fiber.
useAudioAnalyzer creates an AudioContext, routes an HTMLAudioElement through an AnalyserNode, and samples time-domain and frequency-domain data on animation frames. Pure helpers in src/audio/analysis.ts calculate RMS volume, frequency-band energy, and a downsampled waveform.
The latest values are kept in a ref so the React Three Fiber render loop can animate the mesh and particles without rebuilding the scene.
Built something like this? Submit your vibe — free account, takes a minute. How listing works.
More like this
pin art visualizer
Real-time audio visualizer — 9,424 instanced pins morph across 7 shapes driven by live FFT analysis. Tab audio, mic, or file input. Built with…
rainforest sounds
A satirical ambient-music app where frogs fall from the sky and nobody asked. Dopamine meter, 3D physics, and a support sloth who replies in 3–5…
seesound
Shape music and live audio into Chladni-inspired resonant geometry in the browser.
alevoldon lab
Interactive 3D lab of AI agents, WebGL, and generative audio.
shaderflow
Visual node-based GLSL shader editor - design materials on a graph, compiled live to WebGL. React + React Flow + Three.js.
- next js conf 2024 Interactive 3D "NEXT" voxel-letter experience celebrating Next.js Conf 2024 (react-three-fiber, Next.js 15)
Made this?
Claim it: create a free account, then press CLAIM THIS in the cruiser. Put the badge below in your README or on your demo page first; that link is how we know it's yours.
Your project is on the cruise, loaded live from your own site. Put the badge in your README or on the demo page: it shows your live play count, it links back to this page, and everyone who lands here is one click from running the real thing.
