Previously, master meters received raw linear values (0-1) while track
meters received dB-normalized values, causing inconsistent metering display.
Now both master peak and RMS levels are converted using linearToDbScale()
for accurate comparison between track and master levels.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Changed RMS meter colors from 400 to 500 shades (brighter)
- Both Peak and RMS meters now use same color brightness
- Applied to both TrackFader and MasterFader
- Provides better visual consistency between the two meter types
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Added ml-2 (8px left margin) to TrackFader
- Added ml-2 (8px left margin) to MasterFader
- Both faders with their labels now shifted right for better alignment
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Restructured TrackControls layout using flexbox justify-between
- Pan knob positioned at top
- Fader vertically centered in flex-1 middle section
- R/S/M/A/E buttons positioned at bottom in two rows
- Main container uses h-full for proper vertical distribution
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Increased default track height from 320px to 340px
- Provides more breathing room for all track controls
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Reverted buttons to two rows (R/S/M and A/E) for better organization
- Changed button borders from 'rounded' to 'rounded-md' for consistency
- Centered pan knob and fader in their containers
- Increased spacing from gap-1.5 py-1.5 to gap-2 py-2
- Increased default track height from 300px to 320px
- Increased minimum track height from 220px to 240px
- All buttons now clearly visible with proper spacing
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Added showEffects prop to TrackControls interface
- Effects button (E) now shows active state with primary color when toggled
- Automation button (A) already had active state functionality
- Both buttons now provide clear visual feedback when active
- Updated Track component to pass showEffects state to TrackControls
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Integrated all R/S/A/E buttons into TrackControls component
- Removed duplicate button sections from Track component
- Updated CircularKnob pan visualization to show no arc at center position
- Arc now extends from center to value for directional indication
- Moved MasterControls to dedicated right sidebar
- Removed master controls from PlaybackControls footer
- Optimized TrackControls spacing (gap-1.5, smaller buttons)
- Cleaner separation between transport and master control sections
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Unified design language across all tracks and master section:
- Created TrackFader component: vertical fader with horizontal meter bars
- Created TrackControls: integrated pan + fader + mute in compact layout
- Created MasterFader: similar design but larger for master output
- Created MasterControls: master version with pan + fader + mute
- Updated Track component to use new TrackControls
- Updated PlaybackControls to use new MasterControls
- Removed old VerticalFader and separate meter components
New features:
- Horizontal peak/RMS meter bars behind fader (top=peak, bottom=RMS)
- Color-coded meters (green/yellow/red based on dB levels)
- dB scale labels and numeric readouts
- Integrated mute button in controls
- Consistent circular pan knobs
- Professional DAW-style channel strip appearance
- Master section includes clip indicator
Visual improvements:
- Unified design across all tracks and master
- Compact vertical layout saves space
- Real-time level monitoring integrated with volume control
- Smooth animations and transitions
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Added comprehensive master output level monitoring:
- Created MasterMeter component with dual vertical bars (peak + RMS)
- Implemented real-time level monitoring in useMultiTrackPlayer hook
- Added master analyser node connected to audio output
- Displays color-coded levels (green/yellow/red) based on dB thresholds
- Shows numerical dB readouts for both peak and RMS
- Includes clickable clip indicator with reset functionality
- Integrated into PlaybackControls next to master volume
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Implemented comprehensive automation recording system for volume, pan, and effect parameters:
- Added automation recording modes:
- Write: Records continuously during playback when values change
- Touch: Records only while control is being touched/moved
- Latch: Records from first touch until playback stops
- Implemented value change detection (0.001 threshold) to prevent infinite loops
- Fixed React setState-in-render errors by:
- Using queueMicrotask() to defer state updates
- Moving lane creation logic to useEffect
- Properly memoizing touch handlers with useMemo
- Added proper value ranges for effect parameters:
- Frequency: 20-20000 Hz
- Q: 0.1-20
- Gain: -40-40 dB
- Enhanced automation lane auto-creation with parameter-specific ranges
- Added touch callbacks to all parameter controls (volume, pan, effects)
- Implemented throttling (100ms) to avoid excessive automation points
Technical improvements:
- Used tracksRef and onRecordAutomationRef to ensure latest values in animation loops
- Added proper cleanup on playback stop
- Optimized recording to only trigger when values actually change
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Phase 9.3 - Automation Playback:
- Added real-time automation evaluation during playback
- Automation values are applied continuously via requestAnimationFrame
- Volume automation: Interpolates between points and applies to gain nodes
- Pan automation: Converts 0-1 values to -1 to 1 for StereoPannerNode
Implementation details:
- New applyAutomation() function runs in RAF loop alongside level monitoring
- Evaluates automation at current playback time using evaluateAutomationLinear
- Applies values using setValueAtTime for smooth Web Audio API parameter changes
- Automation loop lifecycle matches playback (start/pause/stop/cleanup)
- Respects automation mode (only applies when mode !== 'read')
Technical improvements:
- Added automationFrameRef for RAF management
- Proper cleanup in pause(), unmount, and playback end scenarios
- Integrated with existing effect chain restart mechanism
- Volume automation multiplied with track gain (mute/solo state)
Next steps:
- Effect parameter automation (TODO in code)
- Automation recording (write mode implementation)
- Touch and latch modes
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Effects panel improvements:
- Removed track name label header
- Moved "Add Effect" button to top left corner
- Button now uses self-start alignment for left positioning
- Cleaner, more minimal design
Layout changes:
- Button appears consistently in top left whether effects exist or not
- More space for effect devices
- Better visual hierarchy
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Fixed playhead marker alignment issue:
- Changed automation controls from w-[180px] to w-48 (192px)
- Now matches track controls panel width exactly
- Playhead marker now aligns perfectly between waveform and automation
Technical details:
- Track controls use Tailwind's w-48 class (12rem = 192px)
- Automation controls were using w-[180px] causing 12px misalignment
- Both sidebars now use consistent w-48 sizing
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Major automation UX improvements:
- Moved all automation controls to left sidebar (180px, matching track controls)
- Parameter dropdown selector
- Automation mode button (R/W/T/L with color coding)
- Height adjustment buttons (+/-)
- Automation canvas now fills right side (matching waveform width exactly)
- Removed AutomationHeader component (no longer needed)
- Removed eye icon (automation visibility controlled by "A" button on track)
Two-column layout consistency:
- Left: 180px sidebar with all controls
- Right: Flexible canvas area matching waveform width
- Perfect vertical alignment between waveform and automation
Simplified AutomationLane component:
- Now only renders the canvas area with points
- All controls handled in parent Track component
- Cleaner, more maintainable code structure
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Automation lane improvements:
- Lane now aligns exactly with waveform width using two-column layout
- Added 180px left spacer to match track controls sidebar
- Playhead marker now aligns perfectly with waveform
Automation header improvements:
- Dropdown has fixed width (min-w-[120px] max-w-[200px]) instead of flex-1
- Eye icon (show/hide) is now positioned absolutely on the right
- Cleaner, more compact header layout
Visual consistency:
- Removed redundant border-b from AutomationLane (handled by parent)
- Automation lane and waveform now perfectly aligned vertically
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Phase 9 Automation Improvements:
- Replaced multiple automation lanes with single lane + parameter selector
- Added dropdown in automation header to switch between parameters:
- Track parameters: Volume, Pan
- Effect parameters: Dynamically generated from effect chain
- Lanes are created on-demand when parameter is selected
- Effects panel now has fixed height (280px) with scroll
- Panel no longer resizes when effects are expanded
- Maintains consistent UI layout
Technical changes:
- Track.automation.selectedParameterId: Tracks current parameter
- AutomationHeader: Added parameter dropdown props
- AutomationLane: Passes parameter selection to header
- Track.tsx: Single lane rendering with IIFE for parameter list
- Effects panel: h-[280px] with flex layout and overflow-y-auto
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Added showEffects property to Track type
- Added "E" button with Sparkles icon to toggle per-track effects
- Effects panel now appears below each track when toggled
- Removed global EffectsPanel from AudioEditor
- Updated useMultiTrack to persist showEffects state
- Streamlined workflow: both automation and effects are now per-track
This aligns the UX with professional DAWs like Ableton Live, where
effects and automation are track-scoped rather than global.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Added comprehensive automation lane UI with Ableton-style design:
**Automation Components:**
- AutomationLane: Canvas-based rendering with grid lines, curves, and points
- AutomationHeader: Parameter name, mode selector, value display
- AutomationPoint: Interactive draggable points with hover states
**Automation Utilities:**
- createAutomationLane/Point: Factory functions
- evaluateAutomationLinear: Interpolation between points
- formatAutomationValue: Display formatting with unit support
- addAutomationPoint/updateAutomationPoint/removeAutomationPoint
**Track Integration:**
- Added "A" toggle button in track control panel
- Automation lanes render below waveform
- Default lanes for Volume (orange) and Pan (green)
- Support for add/edit/delete automation points
- Click to add, drag to move, double-click to delete
**Visual Design:**
- Dark background with horizontal grid lines
- Colored curves with semi-transparent fill (20% opacity)
- 4-6px automation points, 8px on hover
- Mode indicators (Read/Write/Touch/Latch) with colors
- Value labels and current value display
Ready for playback integration in next step.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Re-enabled mouse event handlers on waveform canvas that were accidentally
removed. Users can now:
- Click to seek to a specific position
- Drag to create selection regions
Also fixed TypeScript error by properly typing EffectType parameter in
handleAddEffect callback.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Major improvements:
- Fixed multi-file import (FileList to Array conversion)
- Auto-select first track when adding to empty project
- Global effects panel folding state (independent of track selection)
- Effects panel collapsed/disabled when no track selected
- Effect device expansion state persisted per-device
- Effect browser with searchable descriptions
Visual refinements:
- Removed center dot from pan knob for cleaner look
- Simplified fader: removed volume fill overlay, dynamic level meter visible through semi-transparent handle
- Level meter capped at fader position (realistic mixer behavior)
- Solid background instead of gradient for fader track
- Subtle volume overlay up to fader handle
- Fixed track control width flickering (consistent 4px border)
- Effect devices: removed shadows/rounded corners for flatter DAW-style look, added consistent border-radius
- Added border between track control and waveform area
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Fixed "onUpdateTrack is not defined" error by:
- Added onUpdateTrack to TrackProps interface
- Added onUpdateTrack to Track component destructuring
- Passed onUpdateTrack prop from TrackList to Track
This prop is required for:
- Track height resizing functionality
- Automation lane updates
- General track property updates
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Major UI Redesign:
- Reduced track control width from 288px to 192px (33% narrower)
- Replaced horizontal sliders with vertical fader and circular knob
- More compact, professional appearance matching Ableton Live
- Global settings dialog replaces inline recording settings
New Components Created:
- VerticalFader.tsx: Vertical volume control with integrated level meter
- Shows volume dB at top, level dB at bottom
- Level meter displayed as background gradient
- Draggable handle for precise control
- CircularKnob.tsx: Rotary pan control
- SVG-based rotary knob with arc indicator
- Vertical drag interaction (200px sensitivity)
- Displays L/C/R values
- GlobalSettingsDialog.tsx: Centralized settings
- Tabbed interface (Recording, Playback, Interface)
- Recording settings moved from inline to dialog
- Accessible via gear icon in header
- Modal dialog with backdrop
Track Control Panel Changes:
- Track name: More compact (text-xs)
- Buttons: Smaller (h-6 w-6), text-based S/M buttons
- Record button: Circle indicator instead of icon
- Pan: Circular knob (40px) instead of horizontal slider
- Volume: Vertical fader with integrated meter
- Removed: Inline recording settings panel
Header Changes:
- Added Settings button (gear icon) before ThemeToggle
- Opens GlobalSettingsDialog on click
- Clean, accessible from anywhere
Props Cleanup:
- Removed recordingSettings props from Track/TrackList
- Removed onInputGainChange, onRecordMonoChange, onSampleRateChange props
- Settings now managed globally via dialog
Technical Details:
- VerticalFader uses mouse drag for smooth control
- CircularKnob rotates -135° to +135° (270° range)
- Global event listeners for drag interactions
- Proper cleanup on unmount
Benefits:
✅ 33% narrower tracks = more tracks visible
✅ Professional Ableton-style appearance
✅ Cleaner, less cluttered interface
✅ Global settings accessible anywhere
✅ Better use of vertical space
✅ Consistent with industry-standard DAWs
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Volume icon now switches between Volume2 and VolumeX based on volume value
- Matches behavior of master volume controls for consistency
- Icon size remains consistent at h-3.5 w-3.5
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Replaced CircleArrowOutUpRight pan icon with UnfoldHorizontal
- Standardized all track control icons to h-3.5 w-3.5:
- Volume, Pan, Mic, and Gauge icons now have consistent sizing
- Improves visual consistency across the track control panel
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Changed level meter display to show professional dB values instead
of percentages, and replaced volume icon with gauge icon.
Display Changes:
- Show dB values (-60 to 0) instead of percentage (0-100%)
- Use monospace font for consistent digit alignment
- Show "-∞" for silence (level = 0) instead of "-60"
- Rounded to nearest integer dB (no decimals for cleaner display)
Icon Updates:
- Replaced Volume2 icon with Gauge icon for playback levels
- Kept Mic icon for recording input levels
- Gauge better represents metering/measurement vs audio control
dB Conversion:
- Formula: dB = (normalized * 60) - 60
- Reverse of: normalized = (dB + 60) / 60
- Range: -60dB (silence) to 0dB (full scale)
Display Examples:
0.00 (0%) = -∞ (silence)
0.17 (17%) = -50dB (very quiet)
0.50 (50%) = -30dB (moderate)
0.83 (83%) = -10dB (loud)
1.00 (100%) = 0dB (full scale)
Benefits:
✅ Professional dB notation matching industry standards
✅ Clearer for audio engineers and musicians
✅ Easier to identify levels relative to 0dBFS
✅ Gauge icon better conveys "measurement"
✅ Monospace font prevents number jumping
Now meters show "-18" instead of "70%" making it immediately
clear where you are in the dynamic range.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Replaced solid color blocks with smooth gradient to match
professional audio metering standards and dB scale mapping.
The Problem:
- Hard color transitions (green/yellow/red) looked jarring
- Didn't match professional DAW aesthetics
- Color didn't reflect actual dB values visually
The Solution:
- Implemented CSS linear gradient across meter bar
- Gradient matches dB scale breakpoints:
* Green: 0-70% (-60dB to -18dB) - Safe zone
* Yellow: 70-90% (-18dB to -6dB) - Getting hot
* Red: 90-100% (-6dB to 0dB) - Very loud/clipping
Gradient Details:
Horizontal: linear-gradient(to right, ...)
Vertical: linear-gradient(to top, ...)
Color stops:
0%: rgb(34, 197, 94) - Green start
70%: rgb(34, 197, 94) - Green hold
85%: rgb(234, 179, 8) - Yellow transition
100%: rgb(239, 68, 68) - Red peak
Visual Behavior:
- Smooth color transition as levels increase
- Green dominates safe zone (-60dB to -18dB)
- Yellow appears in warning zone (-18dB to -6dB)
- Red shows critical/clipping zone (-6dB to 0dB)
- Matches Pro Tools, Logic Pro, Ableton Live style
Benefits:
✅ Professional appearance matching industry DAWs
✅ Smooth visual feedback instead of jarring transitions
✅ Colors accurately represent dB ranges
✅ Better user experience for mixing/mastering
✅ Gradient visible even at low levels
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Converted level meters from linear to logarithmic (dB) scale to
match professional audio software behavior and human hearing.
The Problem:
- Linear scale (0-100%) doesn't match perceived loudness
- Doesn't match professional DAW meter behavior
- Half-volume audio appears at 50% but sounds much quieter
- No industry-standard dB reference
The Solution:
- Convert linear amplitude to dB: 20 * log10(linear)
- Normalize -60dB to 0dB range to 0-100% display
- Matches professional audio metering standards
dB Scale Mapping:
0 dB (linear 1.0) = 100% (full scale, clipping)
-6 dB (linear ~0.5) = 90% (loud)
-12 dB (linear ~0.25) = 80% (normal)
-20 dB (linear ~0.1) = 67% (moderate)
-40 dB (linear ~0.01) = 33% (quiet)
-60 dB (linear ~0.001) = 0% (silence threshold)
Implementation:
- Added linearToDbScale() function to both hooks
- useMultiTrackPlayer: playback level monitoring
- useRecording: input level monitoring
- Formula: (dB - minDb) / (maxDb - minDb)
- Range: -60dB (min) to 0dB (max)
Benefits:
✅ Professional audio metering standards
✅ Matches human perception of loudness
✅ Consistent with DAWs (Pro Tools, Logic, Ableton)
✅ Better visual feedback for mixing/mastering
✅ More responsive in useful range (-20dB to 0dB)
Now properly mastered tracks will show levels in the
90-100% range, matching what you'd see in professional software.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Switched from Uint8Array to Float32Array for level monitoring
to get accurate, full-precision audio measurements.
The Problem:
- getByteTimeDomainData() uses Uint8Array (0-255)
- Byte conversion: (value - 128) / 128 has asymmetric range
- Positive peaks: (255-128)/128 = 0.992 (not full 1.0)
- Precision loss from byte quantization
- Mastered tracks with peaks at 0dBFS only showed ~50%
The Solution:
- Switched to getFloatTimeDomainData() with Float32Array
- Returns actual sample values directly in -1.0 to +1.0 range
- No conversion needed, no precision loss
- Accurate representation of audio peaks
Changes Applied:
- useMultiTrackPlayer: Float32Array with analyser.fftSize samples
- useRecording: Float32Array with analyser.fftSize samples
- Peak detection: Math.abs() on float values directly
Benefits:
✅ Full 0-100% range for properly mastered audio
✅ Higher precision (32-bit float vs 8-bit byte)
✅ Symmetric range (-1.0 to +1.0, not -1.0 to ~0.992)
✅ Accurate metering for professional audio files
Now mastered tracks with peaks at 0dBFS will correctly show
~100% on the meters instead of being capped at 50%.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Repositioned analyser nodes in audio graph to measure raw audio
levels before volume/gain adjustments.
The Problem:
- Analyser was after gain node in signal chain
- Track volume defaults to 0.8 (80%)
- Audio was scaled down before measurement
- Meters only showed ~50% of actual audio peaks
The Solution:
- Moved analyser to immediately after source
- Now measures raw audio before any processing
- Shows true audio content independent of fader position
Audio Graph Changes:
Before: source -> gain -> pan -> effects -> analyser -> master
After: source -> analyser -> gain -> pan -> effects -> master
Benefits:
✅ Meters show full 0-100% range based on audio content
✅ Meter reading independent of volume fader position
✅ Accurate representation of track audio levels
✅ Increased smoothingTimeConstant to 0.8 for smoother motion
This is how professional DAWs work - level meters show the
audio content, not the output level after the fader.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Changed level calculation from RMS to peak detection to show
more realistic and responsive meter values.
The Problem:
- RMS calculation produced values typically in 0-30% range
- Audio signals have low average RMS (0.1-0.3 for music)
- Meters appeared broken, never reaching higher levels
The Solution:
- Switched to peak detection (max absolute value)
- Peaks now properly show 0-100% range
- More responsive to transients and dynamics
- Matches typical DAW meter behavior
Algorithm Change:
Before (RMS):
rms = sqrt(sum(normalized²) / length)
After (Peak):
peak = max(abs(normalized))
Applied to Both:
- Recording input level monitoring (useRecording)
- Playback output level monitoring (useMultiTrackPlayer)
Benefits:
✅ Full 0-100% range utilization
✅ More responsive visual feedback
✅ Accurate representation of audio peaks
✅ Consistent with professional audio software
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Fixed playback level meters staying at 0% by resolving React closure
issue in the monitoring loop - same pattern as the recording fix.
The Problem:
- monitorPlaybackLevels callback checked stale `isPlaying` state
- Animation loop would run once and never continue
- Dependency on isPlaying caused callback recreation on every state change
The Solution:
- Added isMonitoringLevelsRef to track state independent of React
- Removed isPlaying dependency from callback (now has empty deps [])
- Set ref to true when starting playback
- Set ref to false when pausing, stopping, or ending playback
- Animation loop checks ref instead of stale closure state
Monitoring State Management:
- Start: play() sets isMonitoringLevelsRef.current = true
- Stop: pause(), stop(), onended, and cleanup set it to false
- Loop: continues while ref is true, stops when false
This ensures the requestAnimationFrame loop runs continuously
during playback and calculates real-time RMS levels for all tracks.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
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>
Fixed the input level meter staying at 0% during recording by:
Closure Issue Resolution:
- Added isMonitoringRef to track monitoring state independent of React state
- Removed state dependencies from monitorInputLevel callback
- Animation loop now checks ref instead of stale closure state
Changes:
- Set isMonitoringRef.current = true when starting recording
- Set isMonitoringRef.current = false when stopping/pausing recording
- Animation frame continues while ref is true, stops when false
- Proper cleanup in stopRecording, pauseRecording, and unmount effect
This ensures the requestAnimationFrame loop continues properly and
updates the RMS level calculation in real-time during recording.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Added migration logic to useMultiTrack hook:
- When loading tracks from localStorage, check if height < DEFAULT_TRACK_HEIGHT
- Automatically upgrade old heights (120px, 150px) to new default (180px)
- Preserves custom heights that are already >= 180px
This fixes the inline style issue where existing tracks had
style="height: 120px" that was cutting off the level meter.
After this update, refreshing the page will automatically upgrade
all existing tracks to the new height without losing any data.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Fixed layout issues with the level meter:
Track Height:
- Increased DEFAULT_TRACK_HEIGHT from 150px to 180px
- Ensures enough vertical space for all controls without clipping
Level Meter Display:
- Now always visible (not conditional on recording state)
- Shows "Input" with mic icon when track is armed or recording
- Shows "Level" with volume icon when not recording
- Displays appropriate level based on state
This prevents the meter from being cut off and provides consistent
visual feedback for all tracks. Future enhancement: show actual
playback output levels when not recording.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Increased DEFAULT_TRACK_HEIGHT from 120px to 150px to properly fit:
- Volume slider
- Pan slider
- Input level meter (when track is armed or recording)
This ensures all controls have adequate vertical spacing and the input
meter doesn't get cramped when it appears under the pan control.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Completed the integration of recording functionality into the AudioEditor:
Recording Controls:
- Added global record button to PlaybackControls component
- Implemented track arming system (arm track before recording)
- Added visual feedback with pulsing red animations during recording
- Connected recording state from useRecording hook to UI
AudioEditor Integration:
- Added handleToggleRecordEnable for per-track record arming
- Added handleStartRecording with permission checks and toast notifications
- Added handleStopRecording to save recorded audio to track buffer
- Connected recording input level monitoring to track meters
TrackList Integration:
- Pass recording props (onToggleRecordEnable, recordingTrackId, recordingLevel)
- Individual tracks show input level meters when armed or recording
- Visual indicators for armed and actively recording tracks
This completes Phase 8 (Recording) implementation with:
✅ MediaRecorder API integration
✅ Input level monitoring with RMS calculation
✅ Per-track record arming
✅ Global record button
✅ Real-time visual feedback
✅ Permission handling
✅ Error handling with user notifications
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Added recording capabilities to the multi-track editor:
- useRecording hook with MediaRecorder API integration
- Audio input device enumeration and selection
- Microphone permission handling
- Input level monitoring with RMS calculation
- InputLevelMeter component with visual feedback
- Record-enable button per track with pulsing indicator
- Real-time input level display when recording
Recording infrastructure is complete. Next: integrate into AudioEditor
for global recording control and buffer storage.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Fixed async state update issue where selections were being cleared
immediately after creation. The mouseUp handler now checks drag
distance directly instead of relying on async state, ensuring
selections persist correctly.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Improved selection UX to match professional DAWs:
- Drag directly on waveform to create selections (no modifier keys needed)
- Click without dragging seeks playhead and clears selection
- 3-pixel drag threshold prevents accidental selections
- Fixed variable name conflict with existing file drag-and-drop feature
Users can now naturally drag across waveforms to select regions for
editing, providing a more intuitive workflow.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Added comprehensive selection and editing capabilities to multi-track editor:
- Visual selection overlay with Shift+drag interaction on waveforms
- Multi-track edit commands (cut, copy, paste, delete, duplicate)
- Full keyboard shortcut support (Ctrl+X/C/V/D, Delete, Ctrl+Z/Y)
- Complete undo/redo integration via command pattern
- Per-track selection state with localStorage persistence
- Audio buffer manipulation utilities (extract, insert, delete, duplicate segments)
- Toast notifications for all edit operations
- Red playhead to distinguish from blue selection overlay
All edit operations are fully undoable and integrated with the existing
history manager system.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
