Recorded answer
A React component in Beamline's Voice & audio category.
A spoken answer against a time limit: record (the microphone asked for first, a blocked one said with what to do), the running time against the limit, stop or be stopped at it, hear the answer back with its waveform, then record again or submit. Sending, a failed send that keeps the recording to send again, and submitted are each said, and graded is said apart from submitted (not graded yet, a grade, or not graded at all). Your app owns the recorder, the file, the upload and the grading; the part shows each step from the state you pass.
Use it for
- A question answered out loud: spoken quiz answers, language practice, recorded interview answers, voice notes that are reviewed before they are sent.
- Anywhere a person must hear their recording before it is submitted, under a time limit.
Not for
- Dictating text into a field (speech-input).
- A talk-to-start control on its own (voice-button).
- Playing a finished track (audio-player).
Anatomy
- capture: the record control (Record your answer, Allow the microphone, Stop recording, Try again) above the time against the limit as words and a thin bar; a blocked microphone said with its icon
- review: Your answer with its length, the waveform, the inline player, the limit sentence when it stopped there, a failed send in words, Record again and Submit answer (Send again after a failure)
- submitted: Submitted with the grade line (Not graded yet, Grade: …, or This answer isn't graded)
States
- idle
- asking for the microphone
- microphone blocked
- recording
- limit reached
- review ready
- retake
- sending
- send failed with the recording kept
- submitted, not graded
- submitted, graded
- not graded at all
Keyboard
- the record control: Enter or Space starts and stops
- review: the player's controls, then Record again and Submit answer in order
Motion
The record control's live level while recording; the time ticks once a second from the start time (never from frames). Nothing runs at rest.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
recording (required) | Recording | — | Where the recording stands (controlled: the app moves it on). |
limitSeconds (required) | number | — | The longest answer, in seconds; the app stops recording there. |
grading | "ai" | "manual" | "none" | — | How the answer will be graded: not at all, or by a person or a model later. |
result | string | null | — | The grade once given, in your words ("4 of 5"); null until then. |
onRecord | (() => void) | — | Start recording (ask for the microphone if needed). |
onStop | (() => void) | — | |
onRetake | (() => void) | — | Throw the recording away and record again. |
onSubmit | (() => void) | — | Send the recording; on failure set status failed with the error, keeping src. |
labels | Partial<{ record: Message; stop: Message; asking: Message; denied: Message; tryAgain: M… | — | |
className | string | — | Classes on the documented visual root; no override by default. |
style | CSSProperties | — | Inline styles on the documented visual root; no overrides by default. |
ref | Ref<HTMLDivElement> | — | Receives the documented native target or imperative handle; omitted by default. |
Built from
Dependencies
lucide-react
Import
import { RecordedAnswer } from "@beamline/recorded-answer";Get it
Recorded answer is part of Beamline UI. Install the parts you need in your React app as compiled packages or editable source. Get Beamline · Connect your agent
More in Voice & audio
- Orb: The agent's presence: a thin ring of light around a lens in the brand's hue that holds still at rest, sends an arc round while thinking and widens with…
- Call grid: The people on a video call, laid out for the room they are given: tiles as large as the space allows at the camera's shape, or the person talking (or a…
- Bar visualizer: A row of bars that says what a voice agent is doing: a sweep while connecting, the person's voice while listening, a slow breath while thinking, the…
- Matrix: A dot-matrix display: animated frame sets (loading, pulse, wave, syncing), text and digits in a 5×7 font, or a VU meter of levels or a live source. One…
- Transcript viewer: A recording and its words together: the spoken word lights up as it plays and the transcript follows it, any word or paragraph time plays from there…
- Waveform: The shape of a recording: one bar per slice of loudness, fitted to any width, with the played part in the accent, unmeasured slices hatched and a loading…
- Live waveform: Loudness drawn as it happens: a scrolling history of the microphone (or any live source) or its spectrum, a calm processing state while words are…
- Conversation bar: The control bar of a voice call with an agent: one button to call and hang up, the agent's state as bars, a call timer, mute, and typing when talking is…
- Audio player: One audio element and its controls: play with a loading state, a scrub bar with time, skip, speed and a playlist whose rows play into the same player…
- Voice button: The control that starts and stops talking: click to toggle or hold to talk (pointer, Space, Enter or a global shortcut), with a live level while…
- Scrub bar: A seekable timeline for audio or video: elapsed and total time, what has loaded, chapter marks, a time preview under the pointer, and the full keyboard…
- Speech input: A text field you can speak into: the mic dictates through any speech-to-text provider, the phrase being heard shows apart from the finished words, and…
- Voice picker: Choose a text-to-speech voice from a searchable list (name, accent, tone, use) and hear it first: each voice has its own orb, previews play one at a time…
- Microphone selector: Choose the microphone, test it with a live level and mute it, with every permission and device state spelled out: not yet allowed, blocked (and how to…