Technical Specification: Free Online Audio Pitch Shifter

Overview

A high-performance, single-file browser application designed to allow users to shift the pitch of audio files by semitones while preserving the original tempo (time-stretching).

Core Functionality

• Drag-and-Drop Uploader: Native file input support for .mp3 and .wav formats.
• Real-Time Pitch Control: Slider-based control allowing shifts between -12 and +12 semitones.
• Client-Side Processing: Uses Web Audio API for granular synthesis or a lightweight CDN-based pitch-shifting library (e.g., soundtouch.js or pitchshift.js) to ensure zero-latency local processing.
• Export: Non-destructive download of processed audio as a high-fidelity WAV file via Blob URL generation.

UI/UX Design

• Aesthetic: Premium, minimalist "SaaS" interface. Background: #F8FAFC. Components: White cards (#FFFFFF) with subtle shadow-md and rounded-xl corners.
• Typography: Clean, sans-serif stack (system-ui).
• Components:
  • Hero Section: Clear heading and sub-headline explaining the tool's function.
  • Dropzone: Dashed-border box that highlights on hover. Uses custom SVG icons for file status (pending, loading, ready).
  • Control Panel: Visible range input for semitone adjustment. Start/Stop preview buttons.
  • Status Bar: Real-time progress visualizer (using a <progress> element styled for modern browsers).
  • Action Button: A primary call-to-action button for "Download Processed Audio" that remains disabled until processing is complete.

Technical Constraints & Implementation

• Architecture: Single HTML file containing CSS, JavaScript, and HTML structure.
• Frameworks: Vanilla JavaScript only. Tailwind CSS via CDN for styling. Lucide Icons via CDN for iconography.
• Web Audio API: Utilize AudioContext and OfflineAudioContext for rendering the pitch-shifted stream.
• Storage: NO localStorage, sessionStorage, or cookies. The application state will be managed entirely in-memory using JavaScript objects.
• User Feedback: Custom modals for errors (e.g., "Invalid file type") instead of alert() or prompt() to ensure compatibility with sandboxed iframes.
• Responsiveness: Mobile-first design. Control panel stacks vertically on mobile and horizontally on desktop screens.

Animation & Micro-interactions

• Transition: Use transition-all duration-300 ease-in-out for hover states and modal visibility toggles.
• Visual Feedback: Pulse animation on the dropzone when a file is successfully loaded.
• Loading: Subtle shimmering/fade animation on the processing bar while the Web Audio API renders the offline audio buffer.

Accessibility

• Focus states on all interactive elements (buttons/sliders).
• Proper aria-label tags for buttons and aria-live for status updates (e.g., "Processing complete").