3D Audio Visualizer Pro – Real-time music visualization in the browser

Showcase
1

Hi everyone! I’d like to share a project I just launched.

3D Audio Visualizer Pro is a browser-based app that visualizes audio in real time using Three.js and the Web Audio API.

Features:

  • Mic input and audio file upload
  • 3 scenes: sphere (morphs with volume), frequency bars (rainbow, 32 bars), particle system (500 particles with glow)
  • Video export via MediaRecorder API
  • Freemium model: free tier with watermark / Pro at $9/mo

Tech details:

  • Three.js r128 via CDN
  • AnalyserNode for FFT frequency data
  • CanvasTexture for particle glow
  • Single-file (index.html) deployed on Netlify

Built this as a solo side project. Would love feedback from the Three.js community — especially on performance and scene ideas for future updates!

:link: Live demo: https://resilient-blini-664b4c.netlify.app

1 Like
2

Nice project. Real-time audio visualization in the browser is always fun to see, and combining Three.js with the Web Audio API is a solid approach.

The three scene types sound like a good starting set: the morphing sphere for amplitude, frequency bars for clearer spectral feedback, and a particle system for more atmospheric visuals. Using an AnalyserNode with FFT data is pretty much the standard pipeline and it’s great that you exposed it through multiple visual styles.

The video export via the MediaRecorder API is also a nice feature. Being able to capture the visualization directly from the browser makes the tool much more practical for creators.

Performance-wise, you might experiment with GPU-driven particles or instancing if you expand beyond the current particle count. It could allow much larger visual systems without stressing the CPU.

Overall a cool solo project. Curious to see what additional scene ideas or audio-reactive effects you add in future updates.

3

I get this when testing the link

Site not available

This site was paused as it reached its usage limits. Please contact the site owner for more information.

If this is your site, please visit Netlify’s Billing docs page or log into your Netlify account to upgrade your plan.