Best architecture for scaling a browser-based Web Audio application

Hi everyone,

I’m currently building a browser-based audio processing application using Next.js, TypeScript, and the Web Audio API. All audio processing happens locally in the browser for privacy, so users don’t need to upload files to a server.

The project has grown from a few tools to multiple independent audio tools (pitch shifting, bass boosting, equalizer, audio trimming, BPM detection, key detection, vocal remover, etc.), and I’m starting to think about long-term maintainability.

I’d appreciate advice from developers who have worked on large browser applications.

A few questions:

1. What’s the best way to organize reusable audio-processing logic across many independent tools?

2. Is it better to build one shared processing engine or keep each tool self-contained?

3. Are there any performance issues you’ve encountered with long-running Web Audio API applications?

4. How do you structure reusable UI components while keeping JavaScript bundles small?

5. Any recommendations for testing and optimizing browser-based audio applications as they continue to grow?

I’d love to hear about your experiences, best practices, or any open-source projects worth studying.

Thanks in advance!