DEV Community

Cover image for Built an app that provides various audio tweak tools and runs entirely in the browser
Nico
Nico

Posted on

Built an app that provides various audio tweak tools and runs entirely in the browser

#opensource #webdev #react #showdev

🎧 Why I Built This

I often needed quick & dirty audio utilities. Add a burst of noise to a track, retag WAVs with metadata from another file, extract album covers, convert formats, trim silence, or generate clean waveform PNGs.

Desktop tools (like Kid3 or FFmpeg-GUI) exist… but they were to overkill and not good adjusted for my use cases, so I had to switch apps constantly.

So I made Browser Audio Tools: A Bun + TypeScript + React app that runs ffmpeg locally in a Web Worker. Everything stays on your machine.

🔥 What It Can Do

1. Add Noise + Concat

Useful when you need to slightly alter a track’s fingerprint (e.g., avoiding auto-takedowns on platforms when you already own the rights).

  • Pink or white noise
  • Duration & volume controls
  • Concat automatically
  • Output bitrate selection

2. Extract Cover Art

Pulls the embedded album image from any supported file. Saves as JPEG.

3. Retag WAV into MP3

Have a pristine WAV render but metadata only in an MP3?
Load both → the app copies all tags + artwork → exports a clean 320 kbps MP3.

Great for tidying metadata from downloaded sources (yt-dlp, SoundCloud, etc.).

4. Convert Between Formats

Supported input: WAV, FLAC, AIFF, MP3, OGG, M4A (AAC), …
Supported output:

  • Lossy: MP3, OGG, M4A (AAC)
  • Lossless: WAV, FLAC, AIFF

With controls for:

  • Bitrate
  • Sample rate
  • Channels

5. Retag MP3 (No Re-Encoding)

Fix ID3v2 tags instantly, Title, Artist, Album, Artwork, and more

6. Audio Trimming (Visual UI)

Select the region on a waveform or type times manually.
Options include:

  • Silence removal using ffmpeg’s silenceremove
  • Export to any supported format
  • Keep only the selected region

7. Waveform Generator

Create clean, customizable PNG waveform renders for your track:

  • Bar width/gap/height
  • Opacity & background color
  • Preset color themes
  • Export transparent PNG for overlays

8. Multi-File Processing

Batch convert or batch extract covers. Results come back as a ZIP.
Uses the multi-threaded ffmpeg core for faster per-file execution.

🛠 Under the Hood

  • Bun + React + TypeScript
  • @ffmpeg/ffmpeg with the multi-threaded wasm core (@ffmpeg/core-mt)
  • All processing inside a Web Worker
  • ~30 MB ffmpeg bundle cached after first load
  • Zero back-end; the whole site is static

If you open DevTools, you can see the ffmpeg worker doing all the heavy lifting.

🌐 Try It Out

👉 Live app: https://browser-audio-tools.d3sox.me
👉 GitHub repo: https://github.com/D3SOX/browser-audio-tools

💻 Contributing

It’s MIT-licensed and set up to be easy to run locally:

bun install
bun run dev
bun run build
Enter fullscreen mode Exit fullscreen mode

If you want to contribute tools, presets, UI improvements, or advanced filters, PRs are welcome!

🙏 Thanks & What’s Next

This project aims to be a focused, audio-specific toolkit, not a catch-all converter.
For general media conversions, check out the excellent open-source VERT project (vert.sh / github.com/VERT-sh/VERT).

If you have any ideas for additional tools, open an issue or just leave a comment here.

Give it a try, bookmark it, or star the repo, every bit helps!
👉 https://github.com/D3SOX/browser-audio-tools

Happy processing! 🎶

Top comments (0)