Speech-to-Text - In Browser Test

Examples

Click the microphone icon to start the STT for the associated input/container.

Input

Textarea

Example - Spanish language defined

Add data-lang="es" attribute to STT button

Add lang="es" attribute to acestor element

Add lang="es" attribute to input/textarea element

Use Google Translate destination language

Add data-use-translate="true" attribute to STT button

Div


Usage

Via Data Attributes

A basic STT will have a control item and target HTML element. On the control add data-cast="stt" attribute and a data-target attribute with a selector that points to the target element via ID or CSS selector.

Via JavaScript

Call the plugin manually with options:


$('#mySTT').CAST_STT([options]);

Options

Name Type Default Description
target string null Selector for the target text input or container.
continuous boolean true Setting for SpeechRecognition.continuous
interim boolean true Setting for SpeechRecognition.interimResults
lang string | null null Setting for SpeechRecognition.lang
useTranslate boolean false Detect if Google Translate is used and override the lang option with the target language.

Methods

Method Description
start Start speech recognition.
stop Stop speech recognition.
enable Enable the control button/link.
disable Disable the control button/link.
update Update the control button/link position.
dispose Stop speech recognition and removes event listeners and data.

Events

Event Type Description
nosupport.cast.stt SpeechRecognition is not supported by this browser.
nospeech.cast.stt No speech detected.
nomic.cast.stt Microphone not found.
blocked.cast.stt Microphone access is blocked.
denied.cast.stt Microphone access was denied.
nonetwork.cast.stt Network error or not proper Chrome browser.
init.cast.stt Initialization complete.
ready.cast.stt SpeechRecognition is ready for click to start.
start.cast.stt SpeechRecognition started.
result.cast.stt SpeechRecognition result returned and content updated.
end.cast.stt SpeechRecognition ended.