d3a5961131ebe1950209b5ab5eef531f0f300fb8
Integrated complete project management system with auto-save: **AudioEditor.tsx - Full Integration:** - Added "Projects" button in header toolbar (FolderOpen icon) - Project state management (currentProjectId, currentProjectName, projects list) - Comprehensive project handlers: - `handleOpenProjectsDialog` - Opens dialog and loads project list - `handleSaveProject` - Saves current project to IndexedDB - `handleNewProject` - Creates new project with confirmation - `handleLoadProject` - Loads project and restores all tracks/settings - `handleDeleteProject` - Deletes project with cleanup - `handleDuplicateProject` - Creates project copy - Auto-save effect: Saves project every 30 seconds when tracks exist - ProjectsDialog component integrated with all handlers - Toast notifications for all operations **lib/storage/projects.ts:** - Re-exported ProjectMetadata type for easier importing - Fixed type exports **Key Features:** - **Auto-save**: Automatically saves every 30 seconds - **Project persistence**: Full track state, audio buffers, effects, automation - **Smart loading**: Restores zoom, track order, and all track properties - **Safety confirmations**: Warns before creating new project with unsaved changes - **User feedback**: Toast messages for all operations (save, load, delete, duplicate) - **Seamless workflow**: Projects → Import → Export in logical toolbar order **User Flow:** 1. Click "Projects" to open project manager 2. Create new project or load existing 3. Work on tracks (auto-saves every 30s) 4. Switch between projects anytime 5. Duplicate projects for experimentation 6. Delete old projects to clean up 🤖 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%