Sebastian Krüger
dc9647731d
Major UI Redesign: - Reduced track control width from 288px to 192px (33% narrower) - Replaced horizontal sliders with vertical fader and circular knob - More compact, professional appearance matching Ableton Live - Global settings dialog replaces inline recording settings New Components Created: - VerticalFader.tsx: Vertical volume control with integrated level meter - Shows volume dB at top, level dB at bottom - Level meter displayed as background gradient - Draggable handle for precise control - CircularKnob.tsx: Rotary pan control - SVG-based rotary knob with arc indicator - Vertical drag interaction (200px sensitivity) - Displays L/C/R values - GlobalSettingsDialog.tsx: Centralized settings - Tabbed interface (Recording, Playback, Interface) - Recording settings moved from inline to dialog - Accessible via gear icon in header - Modal dialog with backdrop Track Control Panel Changes: - Track name: More compact (text-xs) - Buttons: Smaller (h-6 w-6), text-based S/M buttons - Record button: Circle indicator instead of icon - Pan: Circular knob (40px) instead of horizontal slider - Volume: Vertical fader with integrated meter - Removed: Inline recording settings panel Header Changes: - Added Settings button (gear icon) before ThemeToggle - Opens GlobalSettingsDialog on click - Clean, accessible from anywhere Props Cleanup: - Removed recordingSettings props from Track/TrackList - Removed onInputGainChange, onRecordMonoChange, onSampleRateChange props - Settings now managed globally via dialog Technical Details: - VerticalFader uses mouse drag for smooth control - CircularKnob rotates -135° to +135° (270° range) - Global event listeners for drag interactions - Proper cleanup on unmount Benefits: ✅ 33% narrower tracks = more tracks visible ✅ Professional Ableton-style appearance ✅ Cleaner, less cluttered interface ✅ Global settings accessible anywhere ✅ Better use of vertical space ✅ Consistent with industry-standard DAWs 🤖 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!