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:
@@ -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;
|
||||
}
|
||||
Reference in New Issue
Block a user