Free Online MP4 to MP3 Audio Extractor Tool

Technical Specification: Client-Side MP4 to MP3 Converter

This application is a standalone, browser-based tool designed to extract audio tracks from MP4 video files without uploading sensitive data to any server. It leverages ffmpeg.wasm to perform audio transcoding locally.

Core Features

1. Local-Only Processing: Uses the ffmpeg.wasm core to handle all conversion logic within the browser sandbox.
2. Drag-and-Drop Interface: A simplified upload zone allows users to drop files or click to browse.
3. Real-Time Progress Tracking: An interactive progress bar reflects the current status of the FFmpeg transcoding process.
4. Bitrate Selection: Users can choose output audio quality (e.g., 128kbps, 192kbps, 320kbps) before starting the conversion.
5. One-Click Download: Once processed, a clear 'Download MP3' button triggers an immediate browser-native save dialog for the generated audio blob.

User Interface & Layout

• Layout: Single-column responsive container. Max-width set to 800px to ensure focus on the task.
• Visual Hierarchy:
  • Header: Simple H1 title with a brief descriptive subheading.
  • Main Area: A prominent dropzone (dashed border) that changes color on hover/file drag.
  • Configuration Panel: A secondary section appearing after file selection to allow format/bitrate adjustments.
  • Action Area: A 'Convert' button that is disabled until a file is selected. Replaced by a progress bar once conversion begins.
  • Results Section: Shows file info (size/name) and the download button once processing is complete.

Design Language

• Color Palette: Professional and clean. Background: #FFFFFF. Text: #2D3436. Primary Actions: #0984E3. Success: #00B894. Error/Alert: #D63031.
• Typography: System-stack sans-serif fonts for maximum readability and speed (e.g., -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica).
• Transitions: Smooth opacity and scale animations for the appearance of result panels. The progress bar uses a linear transition for smoothness.
• No Dark Mode: Explicitly omit dark mode styles to maintain a clean, utility-focused, professional aesthetic.
• No Footer: Explicitly omit all footer elements, including links to other tools or copyright info, to keep the page completely focused on the utility.

Implementation Notes

• Responsive Design: Must work perfectly on mobile and desktop via CSS media queries.
• Sandboxing: Must be compatible with an iframe environment; no reliance on top-level browser navigation or cookies.
• Self-Contained: All logic, styling, and dependencies (including the ffmpeg.wasm initialization) must reside in a single HTML file using inline <style> and <script> tags.