Skip to content

Implement Real-Time Client-Side SNR Monitoring

Description

The current ASR frontend does not provide real-time Signal-to-Noise Ratio (SNR) monitoring for microphone input. This feature needs to be implemented entirely on the client side using the Web Audio API to provide live audio quality feedback during transcription. The implementation should calculate SNR directly from the microphone stream in the browser without relying on backend APIs or server-side processing. The live SNR value should be displayed within the existing Live Transcription UI while preserving the current application design, transcription flow, and responsiveness. This enhancement will help users understand microphone/audio quality in real time and improve the overall live transcription experience.

Objectives

  • Implement real-time client-side SNR calculation
  • Use browser microphone stream for audio analysis
  • Display live SNR values in frontend UI
  • Show audio quality indicators dynamically
  • Integrate smoothly with existing WaveSurfer visualization
  • Preserve current UI and ASR functionality

Functional Requirements

Audio Processing

  • Access microphone input using:
    • navigator.mediaDevices.getUserMedia
  • Use Web Audio API components:
    • AudioContext
    • AnalyserNode
    • MediaStreamAudioSourceNode
    • Float32Array

SNR Calculation

  • Compute signal energy using RMS
  • Estimate background noise floor
  • Calculate SNR continuously in real time
  • Refresh SNR values at optimized intervals

Quality Classification

Display quality levels based on SNR:

SNR Range Quality
> 30 dB Excellent
20–30 dB Good
10–20 dB Moderate
< 10 dB Poor

UI Requirements

  • Add live SNR indicator inside existing Live Transcription section

  • Maintain current dark-themed futuristic UI

  • Use color-coded quality indicators:

    • Green → Excellent
    • Cyan → Good
    • Yellow → Moderate
    • Red → Poor

  • Keep UI responsive and minimal

  • Avoid layout/design changes

Example display:

● Live SNR: 28.4 dB
● Quality: Good

WaveSurfer Integration

If WaveSurfer.js is implemented:

  • Dynamically update waveform color based on SNR quality
  • Maintain smooth real-time waveform rendering

Technical Requirements

Suggested Implementation

  • Create reusable hook/component:
    • hooks/useSNR.js
    • components/SNRIndicator.jsx

Cleanup Handling

  • Cleanup AudioContext properly
  • Stop microphone tracks on unmount
  • Prevent memory leaks
  • Avoid duplicate analyzer initialization

Expected Outcome

The frontend should display real-time client-side SNR values and audio quality indicators using live microphone input analysis while seamlessly integrating with the current ASR UI and WaveSurfer-based audio visualization.