SpeechToTextModel API in Vue Speech To Text API component

Interface for a class SpeechToText

Properties

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.

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.

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.

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.

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.

enablePersistence

boolean

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

enableRtl

boolean

Enable or disable rendering component in right to left direction.

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.

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).

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.

locale

string

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

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.

tooltipSettings

TooltipSettingsModel

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

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.