Waveform Visualizer Demo
Click play to see the animated waveform in action
Visualizer will appear here when audio is playing
How it works: The visualizer uses the Web Audio API to analyze audio frequencies in real-time and displays them as animated lux gold bars.
Integration: This visualizer is now integrated into all Council member chat pages. It will appear automatically when you click the Volume2 button next to Carmen's (or any Council member's) messages.
Note: Once you add your Gemini API key, the visualizer will work with real TTS audio from Carmen and all Council members.
Technical Details
- • Component: TTSWaveformVisualizer.tsx
- • Technology: Web Audio API + AnalyserNode
- • Animation: Framer Motion for smooth transitions
- • Bars: 8 frequency bands sampled from audio spectrum
- • Color: Lux gold gradient (oklch(0.75_0.15_85) to oklch(0.85_0.15_85))
- • Performance: RequestAnimationFrame for 60fps updates