Skip to main content

Voice Input

A voice input component.

Options​

  • autorecord | boolean: controls whether to automatically start recording. Default: false.
  • defaultValue | string: default text value. Default: ''.
  • grammars | array: speech grammar list (unsupported). Default: [].
  • legend | (string|node): legend displayed in front of input field. Default: ''.
  • mode | string: set to full to display a text input field alongside the microphone, status to only display a statusbar with the transcribed texts, microphone to show just a button to toggle recording, or none when the voice input should be invisible and purely controlled via hotkeys / voice commands. Default: 'full'.
  • maxAlternatives | number: maximum number of alternatives provided per speech recognition result. Default: 1.
  • onChange | function: callback function invoked when text input value is updated. Default: onChange() {}.
  • onClick | function: callback function invoked when clicking on the microphone button. Default: onClick() {}.
  • onFinalText | function: callback function invoked once final text is received. Default: onFinalText() {}.
  • onRecordingStart | function: callback function invoked when recording is started. Default: onRecordingStart() {}.
  • onRecordingStop | function: callback function invoked once recording is stopped. Default: onRecordingStop() {}.
  • onSegment | function: callback function invoked with text segments. Default: onSegment() {}.
  • onSubmit | function: callback function when submitting text input value by hitting "Enter". Default: onSubmit() {}.
  • placeholder | string: text input placeholder. Default: none.
  • remote | object: object with start, stop, and toggle and associated hotkeys. Default: none.
  • className | string: class name. Default: ''.
  • style | object: CSS inline styles. Default: {}.
  • timeout | number: number of milliseconds after which to timeout the recording. Default: none.
  • stopTooltip | string: tooltip message displayed while recording. Default: none.
  • startTooltip | string: tooltip message displayed while not recording. Default: none.
  • tooltipPlacement | string: direction of the tooltip. Default: 'left'.
  • width | number: voice input width (in px). Default: 500.
  • height | number: voice input height (in px). Default: 36.

Examples​

Live Editor
Result
ReferenceError: Provider is not defined