Skip to content

Integrate WaveSurfer.js for Real-Time Live Audio Visualization

Vemuri priya requested to merge wavesurfer into feat/develop-pro

Description

This merge request replaces the existing static/fake waveform animation in the Live Transcription section with a real-time microphone waveform visualization using WaveSurfer.js. The new implementation visualizes actual microphone input during live transcription while preserving the current UI design, ASR workflow, backend integration, and application behavior.

Changes Implemented

WaveSurfer.js Integration

  • Added WaveSurfer.js dependency
  • Implemented real-time microphone waveform rendering
  • Connected waveform visualization to live microphone stream using getUserMedia

UI Improvements

  • Replaced static animated equalizer bars with live waveform visualization
  • Preserved existing dark-themed futuristic UI
  • Maintained responsive layout and waveform sizing
  • Applied cyan/blue waveform styling matching current design

Functional Enhancements

  • Waveform starts automatically when user begins listening
  • Waveform stops and cleans up properly when listening ends
  • Preserved existing ASR transcription flow and states
  • Maintained push-to-talk and VAD compatibility

Performance & Cleanup

  • Added proper WaveSurfer instance cleanup
  • Prevented duplicate waveform initialization
  • Stopped microphone tracks correctly on unmount
  • Avoided memory leaks and unnecessary re-renders

Files Modified

  • Added reusable waveform visualization component/hook
  • Updated Live Transcription UI integration
  • Modified only waveform-related frontend files

Expected Outcome

The Live Transcription section now displays a smooth real-time audio waveform based on actual microphone input, providing a more accurate and professional live transcription experience without affecting existing application functionality.

Closes #43 (closed)

Edited by Vemuri priya

Merge request reports