Back to Projects

mp3

A self hosted audio extraction app with local media processing and a matching browser extension.

Started Page updated
mp3

Self hosted audio extraction from video URLs, with a matching browser extension for one click use. Runs entirely on your machine.

The Problem

Most online MP3 converters feel grimy. Pop ups, fake buttons, rate limits, broken providers, and public APIs that can disappear overnight. I wanted the opposite: a clean interface backed by infrastructure I actually control.

What I Built

mp3 is a self hosted audio extraction app with a matching Chrome extension:

  • paste a video URL into a minimal web UI
  • stream extraction progress live in the browser
  • convert to MP3 through local yt dlp + ffmpeg
  • download the finished file from your own backend
  • point the extension at the same /api/extract endpoint

The important shift is architectural. The old dependency on a public extraction API is gone. The app now runs through a Next.js backend that spawns the local extractor directly, stores output in temporary job folders, and serves the final MP3 through its own download route.

Stack: Next.js 16, React 19, Tailwind CSS 4, yt dlp, ffmpeg, Chrome Extension

Key Learnings

1. Critical dependencies should be owned when possible

The public extraction flow worked until it didn’t. When the external API started requiring JWT auth, the product broke for reasons completely outside the app. That was the signal to bring the core path back in house.

2. Good UX still matters in utilitarian tools

This is not a flashy product. It is one field, one button, one outcome. But that simplicity is the feature. Utility software earns trust when the interface feels quiet, clear, and honest.

3. Long running work needs visible progress

Media extraction is not instant. The app now streams newline delimited progress events back to the client so the user sees real movement instead of a dead button and a prayer.

4. Extension drift is real

If the web app evolves and the extension doesn’t, one of them becomes fiction. Keeping both pointed at the same backend makes the project more coherent and much easier to reason about.

Current Status

The repo is up to date with GitHub and in a stronger state now:

  • the self hosted backend is live in the codebase
  • /api/extract validates input, inspects media, and streams progress updates
  • /api/download serves the generated MP3 from temporary job storage
  • the web app is clean, fast, and visually consistent
  • the Chrome extension is aligned with the same backend model
  • the production build passes cleanly

What's Next