Audio Visualizer

Audio Visualizer is a browser-local stereo analysis workstation. Audio files are decoded and analyzed on the device. No upload endpoint, account, or storage binding is required.

Current Features

• full-page A/B-aware drag and drop plus one-or-two-file initial selection for common browser-decodable audio
• DPR-native waveform overview with dBFS references, combined/split L/R views, and a draggable time viewport
• keyboard transport: Space toggles playback, arrow keys seek five seconds
• synchronized A/B playback with instant listening-source switching
• Stereo, L, R, Mid, and Side audition modes plus adjustable high-pass and low-pass review filters
• adaptive high-resolution balanced-log spectrogram with independent time/frequency zoom and pan
• Combined stereo, Left / Right, and Mid / Side spectrogram views
• stable long-analysis status with plan, elapsed time, and progress details
• structured Worker diagnostics with copyable failure context
• real-time combined frequency response with L/R traces
• real-time stereo phase image and correlation classification
• persisted light and dark themes
• responsive desktop, tablet, and mobile workspace layouts

Stack

• SvelteKit 2 and Svelte 5
• Vite 8 and TypeScript
• Web Audio API and a typed analysis Web Worker
• native CSS tokens and canvas rendering
• Cloudflare Workers through @sveltejs/adapter-cloudflare

Local Development

Requirements: Node.js 20 or newer and npm.

npm install
npm run dev

The Vite server prints the local URL. Audio processing stays in the browser.

Verification Commands

npm run check
npm run lint
npm run test
npm run build
npx wrangler types --check

npm run test covers FFT numerical parity and peak location, adaptive and bounded frame planning, log-band safety, chart viewport math, diagnostics serialization, Mid / Side separation, RMS dB combination, and phase correlation math.

Cloudflare Deployment

The production site is the existing Cloudflare Pages project audio-visualizer in the Alkinum account. Authenticate Wrangler once with npx wrangler login, then run:

npm run deploy

The generated Pages Worker entry is .svelte-kit/cloudflare/_worker.js, and its assets are uploaded from .svelte-kit/cloudflare. The deploy script pins the production account, while wrangler.jsonc pins the project, output directory, compatibility date, and nodejs_compat flag. The production URL is audio-visualizer.pwp.sh.

Project Documents

The durable project plan lives in .agents/:

• STATUS.md: implementation state and evidence
• ROADMAP.md: milestones and acceptance gates
• ARCHITECTURE.md: DSP and runtime boundaries
• DESIGN.md: UI tokens and interaction rules
• VERIFICATION.md: automated and browser checks

License

MIT