feat: implement Phase 10.1 & 10.2 - frequency analyzer and spectrogram

Added real-time audio analysis visualizations to master column:

- FrequencyAnalyzer component with FFT bar display
  - Canvas-based rendering with requestAnimationFrame
  - Color gradient from cyan to green based on frequency
  - Frequency axis labels (20Hz, 1kHz, 20kHz)

- Spectrogram component with time-frequency waterfall display
  - Scrolling visualization with ImageData pixel manipulation
  - Color mapping: black → blue → cyan → green → yellow → red
  - Vertical frequency axis with labels

- Master column redesign
  - Fixed width layout (280px)
  - Toggle buttons to switch between FFT and Spectrum views
  - Integrated above master controls with 300px minimum height

- Exposed masterAnalyser from useMultiTrackPlayer hook
  - Analyser node now accessible to visualization components

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

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
2025-11-19 01:40:04 +01:00
parent 4281c65ec1
commit 7dc0780bd2
4 changed files with 276 additions and 22 deletions

View File

@@ -830,6 +830,7 @@ export function useMultiTrackPlayer(
masterPeakLevel,
masterRmsLevel,
masterIsClipping,
masterAnalyser: masterAnalyserRef.current,
resetClipIndicator,
play,
pause,