feat: implement global volume and mute controls

- Add masterVolume state to AudioEditor (default 0.8)
- Pass masterVolume to useMultiTrackPlayer hook
- Create master gain node in audio graph
- Connect all tracks through master gain before destination
- Update master gain in real-time when volume changes
- Wire up PlaybackControls volume slider and mute button
- Clean up master gain node on unmount

Fixes global volume and mute controls not working in transport controls.

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

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
2025-11-18 07:20:29 +01:00
parent 5817598c48
commit 2f8718626c
2 changed files with 31 additions and 7 deletions

View File

@@ -19,6 +19,7 @@ export function AudioEditor() {
const [importDialogOpen, setImportDialogOpen] = React.useState(false);
const [selectedTrackId, setSelectedTrackId] = React.useState<string | null>(null);
const [zoom, setZoom] = React.useState(1);
const [masterVolume, setMasterVolume] = React.useState(0.8);
const { addToast } = useToast();
@@ -41,7 +42,7 @@ export function AudioEditor() {
stop,
seek,
togglePlayPause,
} = useMultiTrackPlayer(tracks);
} = useMultiTrackPlayer(tracks, masterVolume);
// Effect chain (for selected track)
const {
@@ -290,12 +291,12 @@ export function AudioEditor() {
isPaused={!isPlaying}
currentTime={currentTime}
duration={duration}
volume={1}
volume={masterVolume}
onPlay={play}
onPause={pause}
onStop={stop}
onSeek={seek}
onVolumeChange={() => {}}
onVolumeChange={setMasterVolume}
currentTimeFormatted={formatDuration(currentTime)}
durationFormatted={formatDuration(duration)}
/>