feat: Add live microphone oscilloscope during recording#8
Merged
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Adds a
MicWaveformcanvas component that renders a real-time oscilloscope from the existing interviewAnalyserNodetime-domain data during the recording stage.InterviewClientwires 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
MicWaveform(new)InterviewClient(modified)MicWaveformand callsdrawWaveformfrom the existing analyser loopMicWaveformstories (new)storybook.d.ts(modified)decoratorsandrenderto stub Storybook typesDrawing runs imperatively on canvas inside the existing
requestAnimationFrameloop — no per-frame React state.File-by-file changes
Frontend components
frontend/app/InterviewClient.tsx: ImportsMicWaveform, adds a ref, callsdrawWaveformin the existing analyser loop, and renders the waveform whenstage === "recording"so users get live mic feedback during answers.frontend/app/components/MicWaveform/MicWaveform.tsx: New forward-ref component with exportedpaintMicWaveformhelper, 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 withdecoratorsandrenderso the newMicWaveformstories typecheck correctly.