I built a web-synth in four hours
Building your own virtual merchandise is now easier than ever.
If you are not a subscriber of The Fanbase Builder, join 1.000+ artists, creators, and music industry executives who receive it for free.
Let’s dive into today’s topic:
I built a web-synth in four hours
I think this is the most fun I've had when writing this newsletter.
Click here to explore the web-synth and enjoy the bass while reading.
Why it matters
As a strategist, my job is to test new technologies to provide practical advice. I cannot recommend what I do not understand.
I believe ‘virtual merch’ is a massive, untapped opportunity for artists. However, it’s not something that can be copied from one artist to another. For one artist, a game works best. For another, a chatbot to talk with an album’s protagonist. Or an avatar. A WhatsApp sticker pack. Sheet music. Phone backgrounds. Etc.
Previously, I worked on campaigns to launch artist-branded DAW plugins. These were large, costly undertakings reserved for the industry’s biggest names.
Inspired by this, I decided to build a web-based synthesiser for my The Fanbase Builder brand. I wanted to explore what is truly possible when we stop viewing AI as a shortcut and instead begin using it as a creative partner to produce a virtual merch item.
How it works
Please note: I cannot produce music or code. But that is precisely the point. If I can do it, more creative people, like artists, are undoubtedly able to do it.
Here is the step-by-step process of how I built “The Fan Bass Builder” in four hours.
Step 1: Decide what to make
I knew beforehand I wanted to use Strudel, a live-coding platform I have written about before, as a sound engine.
While researching, I found a video by creator Switch Angel live-coding an acid track.
This provided the constraints I needed: the synth should be a bass instrument designed to create acid sounds. I wrote down a list of parameters I wanted the user to control.
Step 2: Use AI for ideation, not just creation
I used Gemini for this project, as it is my current LLM of choice. I gave it the parameters from step 1 and asked it to think with me on how the synth should function.
Crucially, I included a critique prompt: “Can you think with me on how it can be improved further?”
I didn’t want Gemini to compliment me, I wanted it to challenge me. And it did. Gemini effectively ‘roasted’ my lack of production knowledge, explained how a Roland TB-303 works (without me asking), and suggested a more functional workflow.
Step 3: Visualise the product
Once the concept was solid, I needed a visual anchor. I asked Gemini to write a prompt for its image generator Nano Banana Pro to create a product photo of the synth. This gave me a visual reference to work towards.
Step 4: Build the synth
I uploaded the product image to Gemini and asked it to build a browser version of the synth using Canvas.
This was the most challenging phase. After 30 minutes of iterating and debugging, the code wouldn’t work.
I asked Gemini: “It seems hard to get this to work. What can I do to improve or simplify it further?” It suggested abandoning Strudel entirely and using Tone.js instead. This worked instantly.
I then added features like BPM control, echo effects, a mobile version, and a link to this newsletter.
Lesson learned: Always approach AI as a teammate, not an assistant. Don’t tell it what to do, tell it what you want to achieve and explore together what’s the best route to get there.
Step 5: Going live
The result is a single-file HTML document. You do not need complex servers for this; you can upload it to your artist website, Netlify, or similar services. I used GitHub for a quick, free solution.
See it live here: THE FAN BASS BUILDER
Step 6: Creating marketing assets
Due to time constraints, I again used the Google AI suite (Gemini, Nano Banana Pro, and Veo 3.1) to create promotional materials. If I had allocated more time for this, I imagine making a tutorial video, a video of the synth on stage in a nightclub, an artwork for social media, etc.
Total time:
Four hours to build from idea to marketing assets, and one hour to write this newsletter.
Yes, but..
Is this synth perfect? Absolutely not. It is glitchy, simple, and in hindsight, I definitely should have added a ‘mute’ button.
But that is precisely the point. Marketing and branding music is not about delivering polished, corporate-approved perfection. They are about making things happen and creating stories to tell.
If you wait until your virtual merch rivals a €100 plugin, you will never release it. The ‘Do It Yourself’ aesthetic often feels more authentic to fans than a glossy app. Do not let perfection hold you back from releasing something fun.
Take action now
Ideate your tool: Think of a simple digital toy that fits your current aesthetic. Is it a drum machine? A random choreo generator? A game? Use an LLM as a sparring partner to flesh out the concept.
Look to your scene first: Look at your community. What are the inside jokes that define your subculture? Build for them, not for the industry or general public.
Just ship it: Commit to building a prototype in one afternoon. The goal is to give your fans a new way to play in your world.
Your thoughts
Share your ideas for virtual merch for artists in the comments or, even better, show us what you’ve created :)
Further reading
World-Building as Release Strategy (Sound of Fractures)
My accidental app studio: 30 days of vibe coding (Calm & Fluffy)
Tone.js (Tone.js on GitHub)
2 Minute Deep Acid in Strudel (from scratch) (Switch Angel on YouTube)
Browser tool turns code into beats (The Fanbase Builder)
How artists create brand worlds (The Fanbase Builder)
Artists can create momentum by making things happen (The Fanbase Builder)
Growth starts with brand, not marketing (The Fanbase Builder)
the-fan-bass-builder-synth (CarloKiksen on GitHub)
hell yeah, move aside Colin Benders