🤖 feat: sliding window audio waveform for voice recording #862
+306
−77
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
ammar-agent
force-pushed
the
waveform-mode-color-matching
branch
from
f51f379 to
6061497
Compare
ammar-agent
changed the title
ammar-agent
force-pushed
the
waveform-mode-color-matching
branch
from
6061497 to
ae64c50
Compare
- Recording overlay border/background uses mode color (plan=blue, exec=purple) - WaveformBars use bg-plan-mode or bg-exec-mode based on mode - Recording text uses mode-light variant for better contrast - VoiceInputButton receives mode prop for consistent styling - Transcribing state remains amber (processing indicator)
- Add react-audio-visualize for real-time audio visualization - Expose MediaRecorder from useVoiceInput hook for visualization - Create dedicated RecordingOverlay component with cleaner design - LiveAudioVisualizer shows dynamic bars responding to actual audio - Mode-colored visualization (plan=blue, exec=purple) - Simplified keyboard hint display with better formatting - Remove old static WaveformBars component
…smoother animation - Use ResizeObserver for reliable container width measurement - Calculate barWidth and gap dynamically based on container width - Increase smoothingTimeConstant to 0.8 for less jittery animation - Adjust decibel range for better sensitivity
Replace react-audio-visualize with custom SlidingWaveform component: - Shows amplitude history over the last 10 seconds - Samples audio every 50ms (200 samples total) - New samples appear on right, slide left over time - Uses RMS amplitude calculation for smooth visualization - Bars scale dynamically to fill container width - Remove react-audio-visualize dependency
- Deduplicate mode-based styling with lookup tables - Extract RecordingHints component for keyboard shortcuts - Simplify VoiceInputButton color logic - Add roundRect fallback for older browser compatibility - Improve code organization and comments
ammar-agent
force-pushed
the
waveform-mode-color-matching
branch
from
1285836 to
057aff5
Compare
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
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.
Generated with
muxReplaces the static animated bars with a custom sliding window waveform that shows the last 10 seconds of audio amplitude - similar to ChatGPT's recording UI.
Features
Technical
SlidingWaveformcomponent using canvas and Web Audio APIAnalyserNodefor real-time audio amplitude samplingResizeObserverfor responsive container measurementMediaRecorderfromuseVoiceInputhook