Build an MP4 to MP3 Converter with Claude Code

What You're Building

Ever uploaded a video to some random website just to rip the audio? Sketchy privacy, file size limits, ads everywhere. In this tutorial, you'll build your own converter that runs on your computer. Drag in a video, get an MP3. No uploading to strangers. No limits.

By the end, you'll have a good-looking web app with drag-and-drop, a progress bar, and a download button — and you'll understand how it all connects.

Why This Matters

Video-to-audio conversion is one of the most common things people do online. Podcasters extract audio from video interviews. Students rip lecture recordings to listen on the go. Musicians pull samples from video sources. Content creators repurpose video into audio for different platforms.

And almost everyone does it on some random website.

Here's the problem: every time you upload a file to a free online converter, that file sits on someone else's server. You have zero control over what happens to it. Kaspersky, Bitdefender, and even the FBI have warned that free converter sites are a growing vector for malware, data harvesting, and ransomware. Some of these sites quietly extract personal information from your files.

That's why local converters exist. Projects like VERT, ConvertX, and LocalConverter have thousands of users who switched to tools that run on their own machine — files never leave your computer.

Under the hood, almost all of them use the same engine you're about to use: FFmpeg. It's the open-source technology behind YouTube's video processing, VLC media player, HandBrake, and practically every media tool you've ever used. When you build with FFmpeg, you're using the same tech that processes billions of videos a day.

This tutorial isn't just about converting files. It's about learning that you can build tools you actually use.

Before You Start

Open your terminal and make sure these are installed:

node -v

You should see a version number. If not, install Node.js from nodejs.org.

ffmpeg -version

You should see version info. If not, run brew install ffmpeg (Mac) or sudo apt install ffmpeg (Linux).

Now create an empty folder for the project, open it in your terminal, and start Claude Code.

Milestone 1: Create the App with a Nice UI

We're going to ask Claude Code to build the whole project skeleton — the server, the web page, and the styling — in one go.

Prompt:

Build me a video to MP3 converter web app. Create a Node.js server using Express that runs on port 3001. Make a nice-looking web page with a dark gradient background and a white card in the center. The card should say "MP4 to MP3 Converter" with a subtitle "Convert your video files to audio". Add a drag-and-drop area where users can drop their video file, with an upload icon and a "Choose File" button as a fallback. Use a purple/indigo color theme. When someone selects a file, show the file name and size, and show a "Convert to MP3" button.

What Claude Code does: It creates your entire project from scratch — a server file that runs your app, a web page with styling, and JavaScript that handles the drag-and-drop. One prompt created a full working web page with interactive features. That's the power of describing what you want in plain English.

Try it: Run these two commands in your terminal:

npm install
npm start

Open your browser to http://localhost:3001. You should see a polished dark page with a white card. Try dragging a video file onto it — the filename and a convert button should appear.

You've got a working frontend. Now let's make the conversion actually happen.

Milestone 2: Make It Actually Convert Videos

Right now the button doesn't do anything. Let's add the engine that takes a video file and turns it into an MP3.

Prompt:

Now add the actual conversion. When someone clicks the convert button, upload the video to the server, convert it to MP3 using ffmpeg, and save the result. Show a progress bar while it's uploading and converting. After the conversion is done, show a success message with a green checkmark and a "Download MP3" button. Also add a "Convert Another" button to start over. Make sure the server cleans up temporary files after each conversion so they don't pile up.

What Claude Code does: It adds the brain of your app. The server now receives video files, uses FFmpeg (the same tool YouTube uses) to extract the audio, and saves it as an MP3. On the web page, it adds a progress bar that fills up while you wait, and a download screen when it's ready. Claude Code connected the frontend, backend, and a professional media tool — all from one prompt.

Try it: Stop the server (press Ctrl+C), then run:

npm install
npm start

(We run npm install again because Claude Code added new packages.)

Now go to your browser, drop in a video file, and click "Convert to MP3". Watch the progress bar fill up. When it's done, click download and play the MP3 in your music app.

It works. You just built a real converter.

Milestone 3: Make It Smarter About Errors

What happens if someone tries to upload a Word document instead of a video? Or if something goes wrong during conversion? Right now the app would just break silently. Let's fix that.

Prompt:

Add error handling. Only allow video files to be uploaded (mp4, mov, avi, mpeg). If someone tries to upload a non-video file, show them a clear error message. If the conversion fails for any reason, show an error and clean up any leftover files. Also make sure the progress bar doesn't freeze during conversion — add a smooth animation that keeps it moving while the server is working.

What Claude Code does: It adds validation — the app now checks the file type before accepting it, and shows helpful error messages instead of silently failing. It also makes the progress bar smoother: during upload it shows real progress, and during conversion it shows a gentle animation so the user knows the app is still working. Good apps don't just work when everything goes right — they handle things gracefully when something goes wrong.

Try it: Restart the server. Try uploading a non-video file (like a PDF or image) — you should see an error message. Then upload a real video and watch the progress bar. It should animate smoothly the whole way through, with a pulsing "Converting..." label while it works.

Milestone 4: Make It Look Professional

The app works great. Let's add some final touches to make it feel polished.

Prompt:

Polish the UI. Add hover effects on the buttons (slight lift and shadow). Make the drop zone highlight with a purple border when you drag a file over it. Add a smooth transition when switching between the upload screen, the progress screen, and the download screen. Make sure the whole thing looks good on mobile too.

What Claude Code does: It adds CSS transitions and responsive design. Buttons lift when you hover over them. The drop zone lights up when you drag over it. Screens fade between states instead of popping. And the layout adjusts for smaller screens. These small details are what separate a "thing that works" from a "thing that feels good to use."

Try it: Restart the server. Hover over the buttons — they should lift slightly. Drag a file over the drop zone without letting go — the border should turn purple. Try it on your phone (use your computer's IP address instead of localhost). The whole flow should feel smooth and responsive.

What You Built

A complete video-to-audio converter running on your own machine:

• A web page with drag-and-drop file selection
• A server that converts video to MP3 using the same tech as YouTube
• A progress bar that keeps you informed the whole way
• Error handling that doesn't let things break silently
• A clean, responsive design that works on any screen

Four prompts. One working app. Your files never leave your computer.

Take It Further

Here are some ideas to keep building:

• Multiple files — let users drop several videos at once and convert them all
• Choose your format — add a dropdown to pick MP3, WAV, or FLAC
• Audio preview — add a play button so users can listen before downloading