Skip to content

feat: Add live microphone oscilloscope during recording#8

Merged
Butenkite merged 2 commits into
mainfrom
microphone-working-visual
Jun 6, 2026
Merged

feat: Add live microphone oscilloscope during recording#8
Butenkite merged 2 commits into
mainfrom
microphone-working-visual

Conversation

@Butenkite

@Butenkite Butenkite commented Jun 6, 2026

Copy link
Copy Markdown
Collaborator

Summary

Adds a MicWaveform canvas component that renders a real-time oscilloscope from the existing interview AnalyserNode time-domain data during the recording stage. InterviewClient wires the component into the current silence-detection animation frame loop so users can see whether the microphone is idle or receiving speech, using the same RMS threshold as VAD. Storybook stories and stub type updates support the new component without changing backend behavior or environment configuration.

Components touched

Component / surface What changed Visible when
MicWaveform (new) Canvas oscilloscope with idle vs speaking states driven by RMS threshold Recording stage
InterviewClient (modified) Renders MicWaveform and calls drawWaveform from the existing analyser loop Recording stage
Storybook MicWaveform stories (new) Silent, active speech, inactive, and paint-helper demos Storybook only
storybook.d.ts (modified) Adds decorators and render to stub Storybook types Typecheck only

Drawing runs imperatively on canvas inside the existing requestAnimationFrame loop — no per-frame React state.

File-by-file changes

Frontend components

  • frontend/app/InterviewClient.tsx: Imports MicWaveform, adds a ref, calls drawWaveform in the existing analyser loop, and renders the waveform when stage === "recording" so users get live mic feedback during answers.
  • frontend/app/components/MicWaveform/MicWaveform.tsx: New forward-ref component with exported paintMicWaveform helper, canvas resize handling, and imperative drawing API needed to visualize analyser samples without re-rendering React each frame.
  • frontend/app/components/MicWaveform/MicWaveform.stories.tsx: New Storybook stories with mock silent and animated speech demos so the oscilloscope states can be reviewed outside the live interview flow.

Frontend styles

  • frontend/app/components/MicWaveform/MicWaveform.module.css: New module styles for the waveform container, canvas frame, and idle vs speaking status labels required by the component conventions.

Types / interfaces

  • frontend/types/storybook.d.ts: Extends the local Storybook stub with decorators and render so the new MicWaveform stories typecheck correctly.

@Butenkite Butenkite self-assigned this Jun 6, 2026
@Butenkite Butenkite changed the title Wavform feat: Add live microphone oscilloscope during recording Jun 6, 2026
@Butenkite Butenkite merged commit f8e204c into main Jun 6, 2026
2 checks passed
@Butenkite Butenkite deleted the microphone-working-visual branch June 6, 2026 21:02
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant