Technical Specification: Free Online Audio Spectrum Visualizer

Overview

A high-performance, browser-based utility that allows users to upload audio files and view them as real-time, dynamic visual spectrums. The application leverages the Web Audio API for frequency analysis and the HTML5 Canvas API for high-frame-rate rendering, providing a professional "SaaS" experience without any server-side dependencies.

Functional Requirements

• Audio Handling: Use AudioContext to decode and play audio files.
• Frequency Analysis: Implement AnalyserNode to retrieve frequency and time-domain data (FFT).
• Visual Rendering: A requestAnimationFrame loop to draw fluid, responsive waveforms or bars onto an HTML5 Canvas.
• Export: Implement MediaRecorder API to capture the canvas stream as a .webm video file.
• Privacy: 100% client-side. No data is stored, uploaded, or cached. All operations are transient.

UI Layout & Design

• Aesthetic: A crisp, vibrant, light-mode design. Use high-contrast blues (#2563eb) and slate grays (#f1f5f9) to create a clean, professional workspace.
• Header: Simple, clear title and a brief description.
• Upload Zone: A prominent, dashed-border drop zone for file input. Includes a "browse" button for file selection.
• Canvas Stage: The central focus of the app. A responsive container that centers the visualization.
• Control Panel:
  • Play/Pause/Stop transport controls.
  • Visualizer settings: Bar height sensitivity, bar width, and color selection (using modern <input type="color"> widgets).
  • Export button: Triggers the MediaRecorder to save the visualization.

Color Palette

• Background: #ffffff
• App Container Background: #f8fafc (Subtle off-white)
• Primary Accent: #2563eb (Vibrant Blue)
• Text Color: #1e293b (Slate Slate)
• Borders/Dividers: #e2e8f0

Animations & Micro-interactions

• Transitions: Use transition: all 0.3s ease; on all interactive elements (buttons, hover states).
• Upload Interaction: Smooth expansion of the UI when a file is successfully loaded, shifting from the drag-and-drop zone to the visualizer view.
• Visualizer Smoothing: Implement a smoothing time constant in the AnalyserNode to ensure frequency transitions are fluid rather than jittery.

Developer Directives (Strict Constraints)

1. Single File Architecture: All CSS, HTML, and JS must reside in one file. Do not use external CSS or JS files.
2. No Storage: Strictly forbidden from using localStorage, sessionStorage, or cookies. Maintain state using variables only.
3. Modern Standards: Use ES6+ syntax, CSS Flexbox/Grid, and responsive media queries.
4. No Branding: Ensure no fictional logos, names, or brand references appear. Use descriptive UI labels (e.g., "Upload Audio File" instead of a stylized "Upload Now").
5. Sandboxed Compatibility: Ensure the app functions without needing popups or external page navigation. All modal dialogs (e.g., settings) must be CSS-based overlays within the document body.