Skip to content

Implementation of wavesurfer.js

Description

The current frontend implementation uses a static/fake waveform animation in the Live Transcription section of the ASR dashboard. This waveform does not represent actual microphone audio input and needs to be replaced with a real-time audio visualization using WaveSurfer.js.

We need to integrate wavesurfer.js into the frontend while preserving the existing UI design, transcription flow, and backend functionality.

Objectives

  • Remove the existing static waveform/equalizer bars
  • Integrate real-time waveform visualization using WaveSurfer.js
  • Connect waveform to live microphone input
  • Maintain current dark-themed UI and layout
  • Keep existing ASR logic untouched
  • Ensure smooth animation and responsive behavior

Requirements

Functional Requirements

  • Use wavesurfer.js for waveform rendering
  • Start waveform visualization when user clicks Start Listening
  • Stop waveform when listening ends
  • Use microphone stream via navigator.mediaDevices.getUserMedia
  • Preserve existing ASR/transcription state flow
  • Preserve push-to-talk and VAD logic

UI Requirements

  • No layout/design changes
  • Maintain existing card structure and styling
  • Transparent waveform background
  • Cyan/blue waveform colors matching current theme
  • Responsive waveform container
  • No audio controls or timeline
  • Modern smooth animated waveform appearance

Technical Requirements

Dependency

npm install wavesurfer.js

Suggested Implementation

  • Create reusable component:
    • WaveformVisualizer.jsx OR
    • custom hook useWaveSurfer.js

Cleanup Handling

  • Destroy WaveSurfer instance on unmount
  • Stop microphone tracks properly
  • Prevent memory leaks
  • Avoid duplicate initialization

Constraints

Do NOT:

  • Change backend APIs
  • Modify unrelated components
  • Refactor entire project
  • Change folder structure unnecessarily
  • Alter transcription logic
  • Modify overall UI theme/design
  • Introduce new state management libraries

Expected Outcome

The current fake waveform animation is replaced with a real-time microphone waveform visualization powered by WaveSurfer.js while keeping the rest of the ASR application behavior and UI unchanged.

Edited by Vemuri priya