Voice capture
Talk to the agent, then fix what it misheard before sending.
Speech to text that shows what it heard as it hears it, and lets the person fix the words it was unsure of. Each word fades in as it arrives and the wave scrolls while it records. Press Done to move from recording into review, where unsure words are highlighted — tap one to pick from a short "Did you mean" menu — then Done again to send, or Cancel to drop it. Once recording stops the box keeps its height: the wave freezes as the whole recording and the words stay where they were.
Usage
<!-- include core.css + voice-capture.css -->
<div class="dm-vcx dm-panel">
<div class="dm-vcx-top">
<span class="dm-vcx-dot"></span>
<span class="dm-vcx-st">Listening</span>
<span class="dm-vcx-t dm-num dm-muted">0:00</span>
</div>
<canvas class="dm-vcx-wave" aria-hidden="true"></canvas>
<p class="dm-vcx-tx" aria-live="polite"><!-- words arrive here --></p>
<div class="dm-vcx-acts">
<button class="dm-ib dm-fill" aria-label="Pause"><!-- pause --></button>
<span class="dm-sp"></span>
<button class="dm-pill dm-ghost dm-sm">Cancel</button>
<button class="dm-pill dm-primary dm-sm">Done</button>
</div>
<div class="dm-pop dm-vcx-fix" role="menu"></div>
</div>Properties
| Name | Type | Description |
|---|---|---|
words | Array<string | HeardWord> | The words heard so far, in order. Add to the end as they arrive and each one fades in. |
state | listening | paused | review | sent | cancelled | The state. Leave it out to let the buttons move it along. |
defaultState | VoiceCaptureState | The state to start in when uncontrolled. Defaults to listening. |
onStateChange | (state) => void | Called whenever the state moves. |
seconds | number | Seconds recorded. Leave it out to let it count while listening. |
level | number | (() => number) | The input level from 0 to 1, drawn into the wave about 20 times a second. Pass a function to read the microphone on every sample. |
status | string | The status line. Defaults to Listening, Paused, Check what I heard, Sent or Cancelled. |
onSend | (text) => void | Called with the checked transcript when Done is pressed in review. |
onFix | (index, text) => void | Called when the person picks one of a word's alternatives. |
onRecordAgain | () => void | Called by Record again, once the capture is sent or cancelled. |
HeardWord.text | string | The word as heard. |
HeardWord.alternatives | string[] | What it might have been instead. Highlights the word and opens a "Did you mean" menu. |
Theming
Works in light and dark (data-theme="dark") and in the Soft style (data-style="soft"). The panel
sits on a surface; the recording dot uses the --dm-bad tone and pulses, unsure words are tinted
with --dm-hl (and --dm-hl-ok once fixed), and the wave is drawn from the --dm-fg2, --dm-faint
and --dm-muted tokens, so it reads in either theme. In Soft the panel and its buttons are rounder.