If you’ve ever wanted to turn music into a visual — and get paid for it — here’s how I built and shipped exactly that in a week.
A week ago, I had a working Three.js audio visualizer sitting on my local machine with no monetization plan. Today, it’s live on Netlify, approved by Lemon Squeezy, and accepting paid subscribers at $9/month.
Here’s exactly how I did it — including the pivot I had to make halfway through.
What I built
3D Audio Visualizer Pro is a browser-based app that takes audio input (microphone or file upload) and renders it as real-time 3D visuals using Three.js and the Web Audio API. It also lets you export the visuals as a video file (WebM/MP4) — which turned out to be the key to monetization.
Three scenes are included:
- Sphere — expands and rotates with volume
- Bars — 32 rainbow frequency bars
- Particles — 500 particles that accelerate with the beat
The pivot: Chrome Extension → Web App (first)
I originally built this as a Chrome extension — and I’m still working on that version in parallel. But halfway through, I realized the real monetization opportunity wasn’t in the extension itself. It was in video export.
Musicians and content creators need visualizer videos for YouTube, TikTok, and Instagram. That’s a recurring need, which means recurring revenue. A web app makes that much easier to deliver — so I decided to ship the web app first and validate the monetization model before going further with the extension.
Switching only required replacing chrome.tabCapture with getUserMedia(). The entire Three.js rendering code carried over untouched. The pivot took less than a day.
Tech stack
-
Frontend: Vanilla JS + Three.js r128 (CDN) — single
index.htmlfile, no build step -
Audio: Web Audio API (
getUserMediafor mic,createObjectURLfor file input) - Video export: MediaRecorder API at 30fps, outputs WebM/MP4
- Hosting: Netlify free plan (commercial use allowed — Vercel Hobby is not)
- Payments: Lemon Squeezy ($9/month, 7-day free trial, license key generation included)
No backend. No database. Just one HTML file deployed to Netlify.
The freemium model
| Feature | Free | Pro ($9/month) |
|---|---|---|
| Visual scenes | 3 scenes (watermarked) | All scenes, no watermark |
| Audio input | Microphone only | Mic + file upload |
| Video export | ❌ | ✅ MP4 export |
The video export gate is the core of the monetization strategy. Casual users get a free visualizer to play with. Musicians who need clean, exportable content for their socials have a clear reason to upgrade.
Why Lemon Squeezy
I compared several payment options:
| Service | Fee | Notes |
|---|---|---|
| Lemon Squeezy | 5% + $0.50 | Tax handling + license keys included |
| Gumroad | 10% + $0.50 | Good for one-off digital products |
| Stripe direct | 2.9% + $0.30 | Cheapest, but needs a backend |
For a solo developer shipping a SaaS MVP with zero infrastructure, Lemon Squeezy was the clear winner. They handle VAT/tax compliance across regions, which would otherwise be a legal headache. License key generation is built in, which I use to gate Pro features.
The KYB/KYC review process took about 10 days from first application to approval. They asked for a live demo URL, product details, and SNS links — nothing unreasonable.
At $10/sale, here’s what you actually take home: Stripe direct → $9.41, Lemon Squeezy → $9.00, Gumroad → $8.50. Once you’re past $2,000/month, Stripe direct starts making more sense — but until then, Lemon Squeezy’s tax handling and license key generation more than make up for the fee difference.
What’s next
- Firefox AMO — porting the extension as a supplementary channel (1–3 days, free)
- itch.io listing — reaching the creative coding / VJ community
- YouTube / TikTok demo videos — the visualizer reacting to music is inherently shareable content
- Product Hunt launch — once I’ve built more of an audience
Revenue target: $100/month within 1–2 months, $1,000/month within 3–6 months.
Lessons learned
- Ship the MVP first. I almost delayed launch to add more scenes. Don’t.
- The export feature IS the product. Nobody pays for a pretty visualizer. They pay for a tool that saves them time making content.
- Netlify free plan is genuinely good for this kind of project. No cold starts, commercial use allowed, instant deploys from Git.
- Lemon Squeezy’s review takes time. Submit early, keep your demo URL live during review, and respond to KYB requests as quickly as you can.
- Claude Code changed the game for solo developers. No engineering background. No build tooling expertise. Just describing what I wanted and iterating. The Three.js implementation would have taken me weeks without it.
If you’re building something similar or have questions about the Three.js / Web Audio API implementation, drop a comment — happy to share more details.
Built by deltacraft — solo dev, building in public.
Top comments (0)