opinion
TextToSpeechBar
A play, pause, stop and generate bar; the caller drives the speech and the bar shows its state.
Read aloudGenerate, play, pause, stop
Ready to generate audio.
Generating audio…
In context
Interview summaryListen to a write-up instead of reading it
Research
PNCrew interview 11Summary by Priya, 21 Oct
Shift swaps still run through the group chat. Three of the crew asked for a single place to see who is covering, and two said the quiet inbox would help on night watch.
Paused
Props
| Prop | Type | Required | Default |
|---|---|---|---|
state | TtsState | Yes | — |
progress | number | undefined | No | — |
onGenerate | () => void | Yes | — |
onPlay | () => void | Yes | — |
onPause | () => void | Yes | — |
onStop | () => void | Yes | — |
errorMessage | string | undefined | No | — |
voices | TtsVoiceOption[] | undefined | No | — |
selectedVoiceId | string | undefined | No | — |
onVoiceChange | ((voiceId: string) => void) | undefined | No | — |
speed | number | undefined | No | 1 |
onSpeedChange | ((speed: number) => void) | undefined | No | — |
Accessibility
The main button is always at least 44px and an aria-live region announces every state change. The component does no synthesis itself; the caller sets state.
data-rebar-* attributes
data-rebar-component="text-to-speech-bar", data-rebar-state; parts include main-button, stop-button, voice-select, speed-slider.
Migrating to Ant Design
Not codemod-covered. Compose AntD's Button, Progress, Select and Slider against the same state machine.