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>
This commit is contained in:
55
types/track.ts
Normal file
55
types/track.ts
Normal file
@@ -0,0 +1,55 @@
|
||||
/**
|
||||
* Multi-track types and interfaces
|
||||
*/
|
||||
|
||||
export interface Track {
|
||||
id: string;
|
||||
name: string;
|
||||
color: string;
|
||||
height: number;
|
||||
audioBuffer: AudioBuffer | null;
|
||||
|
||||
// Track controls
|
||||
volume: number; // 0-1
|
||||
pan: number; // -1 (left) to 1 (right)
|
||||
mute: boolean;
|
||||
solo: boolean;
|
||||
recordEnabled: boolean;
|
||||
|
||||
// UI state
|
||||
collapsed: boolean;
|
||||
selected: boolean;
|
||||
}
|
||||
|
||||
export interface TrackState {
|
||||
tracks: Track[];
|
||||
selectedTrackId: string | null;
|
||||
soloedTracks: Set<string>;
|
||||
}
|
||||
|
||||
export type TrackColor =
|
||||
| 'red'
|
||||
| 'orange'
|
||||
| 'yellow'
|
||||
| 'green'
|
||||
| 'blue'
|
||||
| 'indigo'
|
||||
| 'purple'
|
||||
| 'pink'
|
||||
| 'gray';
|
||||
|
||||
export const TRACK_COLORS: Record<TrackColor, string> = {
|
||||
red: 'rgb(239, 68, 68)',
|
||||
orange: 'rgb(249, 115, 22)',
|
||||
yellow: 'rgb(234, 179, 8)',
|
||||
green: 'rgb(34, 197, 94)',
|
||||
blue: 'rgb(59, 130, 246)',
|
||||
indigo: 'rgb(99, 102, 241)',
|
||||
purple: 'rgb(168, 85, 247)',
|
||||
pink: 'rgb(236, 72, 153)',
|
||||
gray: 'rgb(156, 163, 175)',
|
||||
};
|
||||
|
||||
export const DEFAULT_TRACK_HEIGHT = 120;
|
||||
export const MIN_TRACK_HEIGHT = 60;
|
||||
export const MAX_TRACK_HEIGHT = 300;
|
||||
Reference in New Issue
Block a user