MP4 to MP3 Converter

A web-based MP4 to MP3 converter application built with Vue 3, TypeScript, and FFmpeg WASM. Upload an MP4 video file and convert it to MP3 audio format directly in your browser.

Features

• Drag & Drop Upload: Easily upload MP4 files by dragging and dropping or clicking to browse
• Multiple Bitrate Options: Choose from 128k, 192k, 256k, or 320k audio bitrate
• Real-time Progress: Track the conversion process with status messages and progress bar
• Play Converted MP3: Preview the converted MP3 directly in browser before downloading
• Download Option: Download the converted MP3 file with a single click
• Client-side Processing: All processing happens in your browser using FFmpeg WASM - no server required
• File Information: Display original file size and converted file size for comparison

Technology Stack

• Vue 3 - Progressive JavaScript framework with Composition API
• TypeScript - Type-safe JavaScript
• Vite - Fast build tool and dev server
• FFmpeg WASM - WebAssembly version of FFmpeg for audio processing
• @ffmpeg/ffmpeg - FFmpeg WASM core library
• @ffmpeg/util - Utility functions for FFmpeg WASM

How It Works

1. Upload: Upload an MP4 file (drag & drop or file picker)
2. Select Bitrate: Choose your preferred audio bitrate quality
   • 128k: Standard quality, smaller file size
   • 192k: High quality (default)
   • 256k: Very high quality
   • 320k: Maximum quality, larger file size
3. Convert: Click "Convert to MP3" to start the conversion process
4. Preview: Click "Play MP3" to listen to the converted audio
5. Download: Click "Download MP3" to save the file to your device

The application uses the FFmpeg command:

ffmpeg -i input.mp4 -b:a 192K -vn output.mp3

Where:

• -i input.mp4: Input MP4 file
• -b:a 192K: Audio bitrate (adjustable)
• -vn: No video (audio only)
• output.mp3: Output MP3 file

⚠️ Important: SharedArrayBuffer Requirement

FFmpeg WASM requires SharedArrayBuffer to work properly. This feature requires specific HTTP headers to be set on your server:

For Production Deployment:

Cross-Origin-Embedder-Policy: require-corp
Cross-Origin-Opener-Policy: same-origin

For Development (localhost): These headers are automatically handled by Vite, so the application should work without additional configuration.

If you encounter "SharedArrayBuffer is not defined" error:

1. Ensure you're using a modern browser (Chrome 90+, Firefox 88+, Safari 14.1+)
2. For production deployment, make sure your server sends the required headers
3. Try using a different browser
4. Check if your browser has disabled SharedArrayBuffer in security settings

Recommended IDE Setup

VSCode + Volar (and disable Vetur) + TypeScript Vue Plugin (Volar).

Type Support for .vue Imports in TS

TypeScript cannot handle type information for .vue imports by default, so we replace the tsc CLI with vue-tsc for type checking. In editors, we need TypeScript Vue Plugin (Volar) to make the TypeScript language service aware of .vue types.

If the standalone TypeScript plugin doesn't feel fast enough to you, Volar has also implemented a Take Over Mode that is more performant. You can enable it by following steps:

1. Disable the built-in TypeScript Extension
   1. Run Extensions: Show Built-in Extensions from VSCode's command palette
   2. Find TypeScript and JavaScript Language Features, right click and select Disable (Workspace)
2. Reload the VSCode window by running Developer: Reload Window from the command palette.

Customize configuration

See Vite Configuration Reference.

Project Setup

npm install

Compile and Hot-Reload for Development

npm run dev

Type-Check, Compile and Minify for Production

npm run build

Lint with ESLint

npm run lint

Browser Compatibility

• Chrome/Edge 90+
• Firefox 88+
• Safari 14.1+

Note: This application requires SharedArrayBuffer support, which may require specific HTTP headers in production environments (see Important section above).

Performance Notes

• FFmpeg WASM loads on demand (when you first convert a file)
• Large files (>500MB) may cause browser memory issues
• Processing time depends on file size and selected bitrate
• All processing happens locally in your browser
• The MP4 file is stored as a blob before conversion

Usage Tips

• Bitrate Selection:
  • Use 128k for smaller file size when quality is less important
  • Use 192k for good balance between quality and size (recommended)
  • Use 256k or 320k for high-quality audio when file size is not a concern
• Preview Before Download: Always play the converted MP3 before downloading to ensure quality meets your expectations
• File Size Comparison: Check the file size comparison to understand the compression ratio

Troubleshooting

Error: "SharedArrayBuffer is not defined"

• This is a browser security feature requirement
• For development (localhost), Vite handles this automatically
• For production, ensure your server sends the required headers
• Try using Chrome or Edge for best compatibility

Application not loading FFmpeg:

• Check browser console for error messages
• Ensure you're using a supported browser
• Try refreshing the page and uploading the file again

Conversion stops midway:

• Check if the file is too large (>500MB)
• Ensure you have enough browser memory available
• Try with a smaller MP4 file first
• Close other browser tabs to free up memory

Converted audio has poor quality:

• Try selecting a higher bitrate (256k or 320k)
• Ensure the original MP4 file has good audio quality
• The quality cannot exceed the original source

License

MIT