Technical Specification: Free Online Audio Equalizer and Pitch Shifter

1. Overview

A professional-grade, browser-based audio utility designed for real-time audio manipulation. This tool empowers users to upload audio files, adjust frequency bands via a graphic equalizer, and modify playback speed and pitch, all within a secure, client-side sandbox environment.

2. Core Features

• Drag-and-Drop Audio Input: Intuitive file ingestion for common formats (MP3, WAV, AAC).
• Real-Time 5-Band Equalizer: Adjustable gain control for specific frequency ranges (Sub, Bass, Mid, High, Treble).
• Playback Controls: Play, pause, seek, and loop functionality.
• Dynamic Pitch/Speed Shifter: Slider-based control to manipulate playback speed and pitch.
• Visual Feedback: Live waveform visualization using Canvas API to see audio amplitude in real-time.
• Zero-Latency Processing: Leverages the Web Audio API for high-performance audio routing.

3. UI/UX Specification

• Layout:
  • Header: Minimalistic, centered title with clear instructional text.
  • Main Control Area: A centralized card containing the file drop zone (which transforms into a player dashboard after file load).
  • Control Panel: Grouped sliders for EQ bands, a separate section for speed/pitch controls, and a master volume fader.
  • Visualization: A wide, responsive canvas element below the player controls showing the waveform.
• Design Language:
  • Aesthetic: Clean, "SaaS-style" light-mode interface.
  • Colors: White/Light Gray background (#F8F9FA), soft blue accents for active buttons (#2563EB), and dark slate text (#1E293B).
  • Typography: Sans-serif, high-legibility system fonts (Inter or system-ui).
  • Transitions: All UI elements use CSS transition: all 0.2s ease-in-out for hover states and state changes.

4. Technical Implementation Guidelines

• Framework: Pure Vanilla JavaScript (ES6+), HTML5, and CSS3. No external build frameworks.
• Audio Engine: Utilize AudioContext and nodes (BiquadFilterNode for EQ, GainNode for volume, MediaElementAudioSourceNode for playback).
• Storage Restrictions: STRICTLY PROHIBITED: Use of localStorage, sessionStorage, or cookies. Maintain all audio state in variable memory.
• Responsiveness: Use Flexbox and Grid. Ensure the EQ sliders stack vertically on mobile and horizontally on desktop.
• External Assets: Use minimal external CDNs (e.g., FontAwesome for iconography, Tailwind CSS for structure) only if necessary for initial boilerplate. Minimize overhead.

5. Development Constraints (Must Follow)

• No Branding: Ensure no fictional brand names or logos are used.
• No Footer: Do not implement a footer element.
• Sandboxed Environment: Design for null origin iframe compatibility. Ensure all links have target="_blank" rel="noopener noreferrer".
• Light Mode Only: The CSS must be strictly configured for a vibrant, professional light theme. Disable any dark mode system overrides.