feat: implement real-time playback level monitoring for all tracks
Added comprehensive playback level monitoring system that shows real-time audio levels during playback for each track. useMultiTrackPlayer Hook: - Added AnalyserNode for each track in audio graph - Implemented RMS-based level calculation with requestAnimationFrame - Added trackLevels state (Record<string, number>) tracking levels by track ID - Insert analysers after effects chain, before master gain - Monitor levels continuously during playback - Clean up level monitoring on pause/stop Audio Graph Chain: source -> gain -> pan -> effects -> analyser -> master gain -> destination AudioEditor Integration: - Extract trackLevels from useMultiTrackPlayer hook - Pass trackLevels down to TrackList component TrackList & Track Components: - Accept and forward trackLevels prop - Pass playbackLevel to individual Track components - Track component displays appropriate level: * Recording level (with "Input" label) when armed/recording * Playback level (with "Level" label) during normal playback Visual Feedback: - Color-coded meters: green -> yellow (70%) -> red (90%) - Real-time percentage display - Seamless switching between input and output modes This completes Phase 8 (Recording) with full bidirectional level monitoring! 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
@@ -24,6 +24,7 @@ export interface TrackListProps {
|
||||
onToggleRecordEnable?: (trackId: string) => void;
|
||||
recordingTrackId?: string | null;
|
||||
recordingLevel?: number;
|
||||
trackLevels?: Record<string, number>;
|
||||
}
|
||||
|
||||
export function TrackList({
|
||||
@@ -42,6 +43,7 @@ export function TrackList({
|
||||
onToggleRecordEnable,
|
||||
recordingTrackId,
|
||||
recordingLevel = 0,
|
||||
trackLevels = {},
|
||||
}: TrackListProps) {
|
||||
const [importDialogOpen, setImportDialogOpen] = React.useState(false);
|
||||
|
||||
@@ -164,6 +166,7 @@ export function TrackList({
|
||||
}
|
||||
isRecording={recordingTrackId === track.id}
|
||||
recordingLevel={recordingTrackId === track.id ? recordingLevel : 0}
|
||||
playbackLevel={trackLevels[track.id] || 0}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user