feat(dictation): show live mic level while recording

Add a pulsing halo behind the stop button that scales with the
microphone input level, giving real-time feedback that recording is
active and the mic is picking up sound.

- use-dictation: meter the captured MediaStream via AudioContext +
  AnalyserNode (analyser only, never connected to destination), compute
  a smoothed RMS audioLevel (0..1) in a requestAnimationFrame loop, and
  tear the meter down on every recording-end path (stop/cancel/auto-stop/
  unmount); meter failure is non-fatal to recording
- mic-button: render a translucent red halo whose scale follows
  audioLevel; honor prefers-reduced-motion with a static halo
- stop(): recover and release resources when no live recorder remains
- fix unhandled rejection from AudioContext.resume()
This commit is contained in:
claude_code
2026-06-21 21:04:22 +03:00
parent 71d908c6b5
commit 55625874c5
3 changed files with 166 additions and 17 deletions

View File

@@ -0,0 +1,22 @@
.recordingWrap {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
}
/* Translucent red halo that sits behind the stop button and scales with the
live microphone level (scale set inline from audioLevel). */
.pulse {
position: absolute;
inset: 0;
border-radius: 50%;
background-color: var(--mantine-color-red-5);
opacity: 0.35;
transform-origin: center;
transform: scale(1);
transition: transform 90ms linear;
pointer-events: none;
will-change: transform;
z-index: 0;
}