ed9ac0b24f
feat: implement Phase 4 - selection and editing features
...
Added comprehensive audio editing capabilities:
- Region selection with Shift+drag on waveform
- Visual selection feedback with blue overlay and borders
- AudioBuffer manipulation utilities (cut, copy, paste, delete, trim)
- EditControls UI component with edit buttons
- Keyboard shortcuts (Ctrl+A, Ctrl+X, Ctrl+C, Ctrl+V, Delete, Escape)
- Clipboard management for cut/copy/paste operations
- Updated useAudioPlayer hook with loadBuffer method
New files:
- types/selection.ts - Selection and ClipboardData interfaces
- lib/audio/buffer-utils.ts - AudioBuffer manipulation utilities
- components/editor/EditControls.tsx - Edit controls UI
Modified files:
- components/editor/Waveform.tsx - Added selection support
- components/editor/AudioEditor.tsx - Integrated edit operations
- lib/hooks/useAudioPlayer.ts - Added loadBuffer method
🤖 Generated with [Claude Code](https://claude.com/claude-code )
Co-Authored-By: Claude <noreply@anthropic.com >
2025-11-17 15:50:42 +01:00
5cf9a69056
feat: complete Phase 3 - Advanced waveform visualization and zoom controls
...
Phase 3 Complete Features:
✅ Drag-to-scrub audio functionality
✅ Horizontal zoom (1x-20x) with smooth scaling
✅ Vertical amplitude zoom (0.5x-5x)
✅ Horizontal scrolling for zoomed waveform
✅ Grid lines every second for time reference
✅ Viewport culling for better performance
✅ Zoom controls UI component
Components Added:
- ZoomControls: Complete zoom control panel with:
- Horizontal zoom slider and buttons
- Amplitude zoom slider
- Zoom in/out buttons
- Fit to view button
- Real-time zoom level display
Waveform Enhancements:
- Drag-to-scrub: Click and drag to scrub through audio
- Zoom support: View waveform at different zoom levels
- Scroll support: Navigate through zoomed waveform
- Grid lines: Visual time markers every second
- Viewport culling: Only render visible portions
- Cursor feedback: Grabbing cursor when dragging
AudioEditor Updates:
- Integrated zoom and scroll state management
- Auto-reset zoom on file clear
- Scroll slider appears when zoomed
- Smooth zoom transitions
Technical Improvements:
- Viewport culling: Only render visible waveform portions
- Grid rendering: Time-aligned vertical grid lines
- Smart scroll clamping: Prevent scrolling beyond bounds
- Zoom-aware seeking: Accurate time calculation with zoom
- Performance optimized rendering
Features Working:
✅ Drag waveform to scrub audio
✅ Zoom in up to 20x for detailed editing
✅ Adjust amplitude for better visualization
✅ Scroll through zoomed waveform
✅ Grid lines show time markers
✅ Smooth cursor interactions
Phase 3 Status: 95% complete
- Completed: All major features
- Optional: Measure/beat markers, OffscreenCanvas, Web Workers
Build verified and working ✓
🤖 Generated with [Claude Code](https://claude.com/claude-code )
Co-Authored-By: Claude <noreply@anthropic.com >
2025-11-17 15:44:29 +01:00
23300f0c47
chore: add PostCSS config and update implementation plan progress
...
- Added postcss.config.js for Tailwind CSS 4
- Updated PLAN.md with progress overview section
- Marked all completed features in implementation phases:
- Phase 1: 95% complete (core infrastructure)
- Phase 2: 90% complete (audio engine)
- Phase 3: 60% complete (waveform visualization)
- Added deployment files to project structure documentation
Features marked as complete:
✅ Project setup with Next.js 16 + Tailwind CSS 4
✅ Core UI components (Button, Card, Slider, Progress, Toast)
✅ Theme system with dark/light mode
✅ Web Audio API integration
✅ Audio file upload and decoding
✅ Playback controls and volume management
✅ Waveform rendering with Canvas API
✅ Timeline scrubbing and seeking
✅ Real-time progress visualization
2025-11-17 15:35:36 +01:00
ebfb4d3fff
feat: implement Phase 2 - Web Audio API engine and waveform visualization
...
Phase 2 Complete Features:
- Web Audio API context management with browser compatibility
- Audio file upload with drag-and-drop support
- Audio decoding for multiple formats (WAV, MP3, OGG, FLAC, AAC, M4A)
- AudioPlayer class with full playback control
- Waveform visualization using Canvas API
- Real-time waveform rendering with progress indicator
- Playback controls (play, pause, stop, seek)
- Volume control with mute/unmute
- Timeline scrubbing
- Audio file information display
Components:
- AudioEditor: Main editor container
- FileUpload: Drag-and-drop file upload component
- AudioInfo: Display audio file metadata
- Waveform: Canvas-based waveform visualization
- PlaybackControls: Transport controls with volume slider
Audio Engine:
- lib/audio/context.ts: AudioContext management
- lib/audio/decoder.ts: Audio file decoding utilities
- lib/audio/player.ts: AudioPlayer class for playback
- lib/waveform/peaks.ts: Waveform peak generation
Hooks:
- useAudioPlayer: Complete audio player state management
Types:
- types/audio.ts: TypeScript definitions for audio types
Features Working:
✓ Load audio files via drag-and-drop or file picker
✓ Display waveform with real-time progress
✓ Play/pause/stop controls
✓ Seek by clicking on waveform or using timeline slider
✓ Volume control with visual feedback
✓ Audio file metadata display (duration, sample rate, channels)
✓ Toast notifications for user feedback
✓ SSR-safe audio context initialization
✓ Dark/light theme support
Tech Stack:
- Web Audio API for playback
- Canvas API for waveform rendering
- React 19 hooks for state management
- TypeScript for type safety
Build verified and working ✓
🤖 Generated with [Claude Code](https://claude.com/claude-code )
Co-Authored-By: Claude <noreply@anthropic.com >
2025-11-17 15:32:00 +01:00
45b73e148b
fix: update healthcheck to use 127.0.0.1 instead of localhost
...
Updated Docker healthcheck to use 127.0.0.1 for better compatibility.
Deployment target: https://audio.kit.pivoine.art
2025-11-17 15:27:30 +01:00
591f726899
feat: initialize Next.js 16 project with Tailwind CSS 4 and Docker support
...
Phase 1 Implementation:
- Set up Next.js 16 with React 19, TypeScript 5, and Turbopack
- Configure Tailwind CSS 4 with OKLCH color system
- Implement dark/light theme support
- Create core UI components: Button, Card, Slider, Progress, Toast
- Add ThemeToggle component for theme switching
- Set up project directory structure for audio editor
- Create storage utilities for settings management
- Add Dockerfile with multi-stage build (Node + nginx)
- Configure nginx for static file serving with caching
- Add docker-compose.yml for easy deployment
- Configure static export mode for production
Tech Stack:
- Next.js 16 with Turbopack
- React 19
- TypeScript 5
- Tailwind CSS 4
- pnpm 9.0.0
- nginx 1.27 (for Docker deployment)
Build verified and working ✓
🤖 Generated with [Claude Code](https://claude.com/claude-code )
Co-Authored-By: Claude <noreply@anthropic.com >
2025-11-17 15:23:00 +01:00
88749dafae
docs: add initial project plan and README
...
Added comprehensive implementation plan (PLAN.md) with 15 phases covering:
- Project setup with Next.js 16 and Tailwind CSS 4
- Web Audio API integration
- Waveform visualization
- Multi-track editing
- Audio effects and automation
- Recording capabilities
- Export/import functionality
🤖 Generated with [Claude Code](https://claude.com/claude-code )
Co-Authored-By: Claude <noreply@anthropic.com >
2025-11-17 15:05:39 +01:00
