SpeechToTextComponent

Represents the React SpeechToText Component

<SpeechToTextComponent></SpeechToTextComponent>

Properties

allowInterimResults

boolean

Determines whether interim results should be provided during speech recognition. If true, partial results are delivered in real-time, allowing for a dynamic user experience. If false, only final results will be provided after the recognition process is complete.

Defaults to true

buttonSettings

ButtonSettingsModel

Customizes the appearance and functionality of the record button. This allows for customization of button content, icons, and positions. Use it to adjust the button’s visual and functional properties according to your needs.

Defaults to null

cssClass

string

Specifies additional CSS classes for customizing the component’s appearance. Allows applying custom styles to match application requirements This property can be used to extend the component’s default style.

Defaults to ”

disabled

boolean

Indicates whether the component is disabled. When true, all interactions with the component (e.g., clicking, listening) are disabled. Useful for preventing user interaction in specific states, such as during processing or error handling.

Defaults to false

enablePersistence

boolean

Enable or disable persisting component’s state between page reloads.

Defaults to false

enableRtl

boolean

Enable or disable rendering component in right to left direction.

Defaults to false

htmlAttributes

{ : }

Allows additional HTML attributes to be added to the root element of the SpeechToText button. This property accepts a key-value pair format for attributes such as name, aria-label, and others. This helps to make the button more accessible and adaptable to specific requirements.

Defaults to null

lang

string

The language and locale used for speech recognition. This ensures proper transcription by selecting the correct language model. Common formats: ‘en-US’ (English, United States), ‘es-ES’ (Spanish, Spain), ‘fr-FR’ (French, France).

Defaults to ”

listeningState

SpeechToTextState

Represents the current operational state of the component. This state helps manage transitions and control the component’s behavior. Possible values:

• ‘Inactive’: Component is idle.
• ‘Listening’: The component is actively listening for speech input.
• ‘Stopped’: Listening has stopped.

Defaults to ‘Inactive’

locale

string

Overrides the global culture and localization value for this component. Default global culture is ‘en-US’.

Defaults to ”

showTooltip

boolean

Determines whether the tooltip should be displayed on hover over the SpeechToText button. If true, the tooltip will be shown to provide additional information about the current state or action.

Defaults to true

tooltipSettings

TooltipSettingsModel

Defines tooltip content and positioning for guiding user interactions. Tooltips provide helpful instructions or descriptions for button actions, improving user experience.

Defaults to null

transcript

string

The transcribed text from the speech-to-text process. This property updates dynamically during speech recognition, providing both interim and final results. It can be used to display or process the transcribed speech.

Defaults to ”

Methods

destroy

Destroy the SpeechToText.

Returns void

startListening

Begins the audio capture process by listening to the user’s microphone input. This method initiates the speech-to-text process and continuously updates the transcript property with interim and final recognition results.

Returns void

stopListening

Stops the audio capture process and finalizes the speech recognition. This method ends the ongoing speech-to-text operation and completes the recognition process, storing the final transcription. It is typically called to stop listening when the user is finished speaking.

Returns void

Events

created

EmitType<Event>

Triggered when the SpeechToText component is initialized and ready for interaction. This event indicates that the component is fully loaded and can start processing user input. Use this event to execute initialization logic or show the component’s ready state.

onError

EmitType<ErrorEventArgs>

Triggered when an error occurs during speech recognition or listening, this event provides details to handle exceptions, display messages, and troubleshoot issues like microphone failures, network errors, or unsupported browsers and language models. Common error strings may include:

• no-speech: No speech detected. Please speak into the microphone.
• aborted: Speech recognition was aborted.
• audio-capture: No microphone detected. Ensure your microphone is connected.
• not-allowed: Microphone access denied. Allow microphone permissions.
• service-not-allowed: Speech recognition service is not allowed in this context.
• network: Network error occurred. Check your internet connection.
• unsupported-browser: The browser does not support the SpeechRecognition API.

In addition to handling common speech recognition errors, it is essential to handle unsupported browser errors. For example, if the browser does not support the SpeechRecognition API, the unsupported-browser error string will be triggered. This can help notify users to switch to a compatible browser.

For more details on the error strings and how to handle them, refer to the documentation: SpeechRecognitionErrorEvent error

onStart

EmitType<StartListeningEventArgs>

Triggered when speech recognition begins listening for audio input. This event fires when the user starts the speech-to-text process. Use this event to execute logic or display feedback (e.g., a “Listening…” message).

onStop

EmitType<StopListeningEventArgs>

Triggered when speech recognition stops listening for audio input. This event marks the end of the listening session, either due to user action or completion of recognition. Use this event to trigger post-processing logic or indicate that listening has ended (e.g., show “Listening stopped”).

transcriptChanged

EmitType<TranscriptChangedEventArgs>

Triggered when the transcript is updated during the speech recognition process. This event delivers updated text as the user speaks. It can be used to update the UI with real-time transcription. The event provides both interim and final transcript results, depending on the configuration.