VibeBuilders.ai Logo
VibeBuilders.ai
I built a library to visualize and edit audio filters

I built a library to visualize and edit audio filters

AlexStrelets
April 15, 2025
reddit

Hey everyone!

TLDR: No fancy AI Agents or trendy micro-SaaS here β€” just an old-school library. Scroll down for the demo link! πŸ™ƒ

App Demo

The Story Behind

Several years ago, I deep-dived into reverse engineering the parameter system used in VAG (Volkswagen, Audi, Porsche, etc) infotainment units. I managed to decode their binary format for storing settings for each car type and body style. To explain it simply - their firmware contains equalizer settings for each channel of the on-board 5.1 speaker system based on cabin volume and other parameters, very similar to how home theater systems are configured (gains, delays, limiters, etc).

I published this research for the car enthusiast community. While the interest was huge, the reach remained small since most community members weren't familiar with hex editors. Only a few could really replicate what I documented. After some time, I built a web application that visualized these settings and allowed to unpack, edit and repack that data back into the binary format.

Nowadays

The original project was pretty messy (spaghetti code, honestly) and had a very narrow focus. But then I realized the visualization library itself could be useful for any audio processing software.

When I first tried to visualize audio filters with that project, I hit a wall. Most charting libraries are built for business data, all those "enterprise-ready visualization solutions". But NONE of them is designed for audio-specific needs.

D3.js is the only real option here β€” it’s powerful but requires days of digging through docs just to get basic styling right. And if you want interactive features like drag-and-drop? Good luck with that. (Fun fact: due to D3's multiple abstraction layers, just the same filter calculations in DSSSP are 1.4-2x faster than D3's implementation).

So, I built a custom vector-based graph from scratch with a modern React stack. The library focuses on one thing - audio filters. No unnecessary abstractions, no enterprise bloat, just fast and convenient (I hope!) tools for tools for audio processing software.

Core Features

  • Logarithmic frequency response visualization
  • Interactive biquad filter manipulation
  • Custom audio calculation engine
  • Drag-and-drop + Mouse wheel controls
  • Flexible theming API

Technical Details

  • Built with React + SVG (no Canvas)
  • Zero external dependencies besides React
  • Full TypeScript support

Live Demo & Docs & GitHub

This is the first public release, landing page is missing, and the backlog is huge, and docs do not cover some aspects. (You know, there's never a perfect timimng - I just had to stop implementing my ideas and make it community driven).

I'd love to see what you could build with these components. What's missing? What could be improved?

I'm still lacking the understanding of how it could gain some cash flow, while staying open-source. Any ideas?

Vibe Score

LLM Vibe Score

0

Sentiment

Human Vibe Score

1

Rate this Resource

Join the VibeBuilders.ai Newsletter

The newsletter helps digital entrepreneurs how to harness AI to build your own assets for your funnel & ecosystem without bloating your subscription costs.

Start the free 5-day AI Captain's Command Line Bootcamp when you sign up:

By subscribing, you agree to our Privacy Policy and Terms of Service.