Audio File Size Estimator Technical Specification

Overview

A high-performance, single-file browser utility designed to help users calculate the estimated file size of audio tracks based on encoding parameters. It serves as a planning tool for audio engineers, web developers, and content creators to optimize storage and bandwidth usage.

Core Features

• Live Estimation Engine: Calculations update instantly as the user adjusts input sliders or dropdown menus without needing a submit button.
• Preset Profiles: Quick-select buttons for common industry standards (e.g., "CD Quality WAV", "Streaming MP3 128kbps", "High-Quality 320kbps").
• Format-Specific Calculations: Logic to differentiate between uncompressed (WAV, AIFF) and compressed (MP3, AAC, OGG) math.
• Unit Conversion: Automatically displays sizes in KB, MB, and GB based on the resulting file size.

UI Layout

• Header: Clean, centered title and a concise one-sentence description.
• Main Tool Area (Split Grid):
  • Left Column (Inputs):
    • Audio Duration (Minutes/Seconds inputs).
    • Format selector (Dropdown).
    • Bitrate slider/input (Dynamic based on selected format).
    • Sample Rate/Bit Depth controls (Visible for uncompressed formats).
  • Right Column (Outputs):
    • A prominent, large-text display showing the estimated size (e.g., "12.4 MB").
    • A breakdown section showing how the size was calculated (Formula visualization).
• Responsive Behavior: Stack columns vertically on mobile, side-by-side on desktop.

Aesthetic & Styling

• Palette: Use a professional "SaaS" light-mode palette: bg-slate-50 for the background, white for container cards, #2563eb (primary blue) for interactive elements, and #334155 for text.
• Shadows: Use soft, diffused shadows (e.g., shadow-lg Tailwind style) on container cards to create a subtle "floating" effect.
• Transitions: Smooth 200ms ease-in-out transitions for all hover states and UI updates.

Developer Directives (Constraint Compliance)

• Architecture: All HTML, CSS, and JS must reside in one .html file. No build steps.
• Storage: Do NOT use localStorage, sessionStorage, or cookies. Maintain state via global JS variables.
• Popups: Use custom <div> based modals for any alerts/prompts. Do NOT use alert() or confirm().
• External Resources: Only use CDNs (e.g., Tailwind via CDN, Google Fonts via link).
• Iframe Safety: Ensure all interactivity works within a sandboxed <iframe> with no parent access.
• Responsiveness: Use Flexbox/Grid to ensure the tool is usable on mobile phones and wide desktops.

Mathematical Logic (Reference)

• Uncompressed (WAV): (Sample Rate * Bit Depth * Channels * Duration in Seconds) / 8
• Compressed (MP3/AAC): (Bitrate in bits per second * Duration in Seconds) / 8