valknar/audio-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
61 Commits 1 Branch 0 Tags
f640f2f9d4937cc4966e30f8ee250a649a41703a
Commit Graph

7 Commits

Author SHA1 Message Date
Sebastian Krüger
f640f2f9d4 feat: implement per-track and master effect chains (Option 3) 
Architecture:
- Each track now has its own effect chain stored in track.effectChain
- Separate master effect chain for the final mix output
- SidePanel has 3 tabs: Tracks, Track FX, Master FX

Changes:
- types/track.ts: Add effectChain field to Track interface
- lib/audio/track-utils.ts: Initialize effect chain when creating tracks
- lib/hooks/useMultiTrack.ts: Exclude effectChain from localStorage, recreate on load
- components/editor/AudioEditor.tsx:
  - Add master effect chain state using useEffectChain hook
  - Add handlers for per-track effect chain manipulation
  - Pass both track and master effect chains to SidePanel
- components/layout/SidePanel.tsx:
  - Update to 3-tab interface (Tracks | Track FX | Master FX)
  - Track FX tab shows effects for currently selected track
  - Master FX tab shows master bus effects with preset management
  - Different icons for track vs master effects tabs

Note: Effect processing in Web Audio API not yet implemented.
This commit sets up the data structures and UI.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
 2025-11-18 07:30:46 +01:00
Sebastian Krüger
64902fa707 chore: remove debug console.log statements 
Cleaned up debugging code now that track name rendering issue is resolved.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
 2025-11-17 22:51:42 +01:00
Sebastian Krüger
7c19c069bf fix: convert selectedTrack.name to string in Effect Chain header 
Fixed [object Object] display in Effect Chain section of SidePanel
by adding String() conversion to selectedTrack.name.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
 2025-11-17 22:46:28 +01:00
Sebastian Krüger
6b540ef8fb fix: prevent localStorage circular reference in track serialization 
Explicitly whitelist track fields when saving to localStorage to prevent
DOM element references (HTMLButtonElement with React fiber) from being
serialized. This fixes the circular structure JSON error.

Changes:
- Changed from spread operator exclusion to explicit field whitelisting
- Ensured track.name is always converted to string
- Only serialize Track interface fields that should be persisted

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
 2025-11-17 22:36:07 +01:00
Sebastian Krüger
a2636bb3a9 fix: ensure track names are strings when loading from localStorage 
Added string conversion and error handling when loading tracks from localStorage to prevent corrupted data from causing React rendering errors. If localStorage data is corrupted, it will be cleared automatically.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
 2025-11-17 22:30:45 +01:00
Sebastian Krüger
4735b5fb00 fix: resolve circular reference error in localStorage 
Fixed the "Converting circular structure to JSON" error in useMultiTrack by properly destructuring audioBuffer from track objects before serializing to localStorage.

Changed from spreading the entire track object (which could have circular refs) to explicitly excluding audioBuffer using destructuring.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
 2025-11-17 22:04:13 +01:00
Sebastian Krüger
3c950eeba7 feat: implement Phase 7.1-7.2 multi-track infrastructure 
Added core multi-track support with track management and controls:

**Track Types & Utilities:**
- Track interface with audio buffer, controls (volume/pan/solo/mute)
- Track utility functions for creation, mixing, and gain calculation
- Track color system with 9 preset colors
- Configurable track heights (60-300px)

**Components:**
- TrackHeader: Collapsible track controls with inline name editing
  - Solo/Mute buttons with visual feedback
  - Volume slider (0-100%) and Pan control (L-C-R)
  - Track color indicator and remove button
- Track: Waveform display component with canvas rendering
  - Click-to-seek on waveform
  - Playhead visualization
  - Support for collapsed state
- TrackList: Container managing multiple tracks
  - Scrollable track list with custom scrollbar
  - Add track button
  - Empty state UI

**State Management:**
- useMultiTrack hook with localStorage persistence
- Add/remove/update/reorder track operations
- Track buffer management

Features implemented:
- ✅ Track creation and removal
- ✅ Track naming (editable)
- ✅ Track colors
- ✅ Solo/Mute per track
- ✅ Volume fader per track (0-100%)
- ✅ Pan control per track (L-C-R)
- ✅ Track collapse/expand
- ✅ Track height configuration
- ✅ Waveform visualization per track
- ✅ Multi-track audio mixing utilities

Next: Integrate into AudioEditor and implement multi-track playback

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
 2025-11-17 20:59:36 +01:00