a0ce83a6548a9b0a2946b458a32a9ce348f8e1cd
Switched from Uint8Array to Float32Array for level monitoring to get accurate, full-precision audio measurements. The Problem: - getByteTimeDomainData() uses Uint8Array (0-255) - Byte conversion: (value - 128) / 128 has asymmetric range - Positive peaks: (255-128)/128 = 0.992 (not full 1.0) - Precision loss from byte quantization - Mastered tracks with peaks at 0dBFS only showed ~50% The Solution: - Switched to getFloatTimeDomainData() with Float32Array - Returns actual sample values directly in -1.0 to +1.0 range - No conversion needed, no precision loss - Accurate representation of audio peaks Changes Applied: - useMultiTrackPlayer: Float32Array with analyser.fftSize samples - useRecording: Float32Array with analyser.fftSize samples - Peak detection: Math.abs() on float values directly Benefits: ✅ Full 0-100% range for properly mastered audio ✅ Higher precision (32-bit float vs 8-bit byte) ✅ Symmetric range (-1.0 to +1.0, not -1.0 to ~0.992) ✅ Accurate metering for professional audio files Now mastered tracks with peaks at 0dBFS will correctly show ~100% on the meters instead of being capped at 50%. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
Audio UI
A sophisticated browser-only audio editor built with Next.js 16, React 19, and Tailwind CSS 4.
Features (Planned)
- 100% Client-Side: All audio processing happens in your browser
- Multi-Track Editing: Professional multi-track audio editing
- Advanced Effects: EQ, compression, reverb, delay, and more
- Automation: Automate volume, pan, and effect parameters
- Recording: Record audio directly from your microphone
- Analysis Tools: Frequency analyzer, spectrogram, and loudness metering
- Export Formats: WAV, MP3, OGG, FLAC
- Project Management: Save and load complete projects
- Privacy-First: No uploads, all data stays local in your browser
Tech Stack
- Next.js 16 with React 19
- TypeScript 5
- Tailwind CSS 4 with OKLCH colors
- Web Audio API for audio processing
- Canvas API for waveform visualization
- IndexedDB for project storage
Getting Started
This project is currently in the planning phase. See PLAN.md for the complete implementation plan.
Development (Coming Soon)
# Install dependencies
pnpm install
# Run development server
pnpm dev
# Build for production
pnpm build
Inspiration
Inspired by AudioMass and professional DAWs like Ableton Live, Logic Pro, and FL Studio.
License
TBD
Contributing
This is a personal project, but suggestions and ideas are welcome!
Description
Languages
TypeScript
98.8%
CSS
1.1%
Dockerfile
0.1%