SpeechToTextButton Events
The Kendo UI for Vue SpeechToTextButton provides a set of events that allow you to respond to user interactions and speech recognition states.
Grant microphone access in the browser to try speech recognition in the following example. The demo logs the events and the recognized text as you interact with the SpeechToTextButton.
Available Events
The SpeechToTextButton fires the following events:
onStart
The onStart event is fired when the user clicks the SpeechToTextButton and the speech recognition process begins.
<SpeechToTextButton @start="onStart" />
<script setup>
const onStart = () => {
// Update UI to indicate that listening has started
};
</script>onResult
The onResult event fires whenever a speech recognition result is available. It receives a SpeechToTextResultEvent.
The event object contains:
isFinal(boolean)—Indicates whether this is a final result (true) or an interim result (false).alternatives(array)—An array of alternative results, each with:transcript(string)—The recognized text.confidence(number)—A value between 0 and 1 indicating the confidence level of the recognition.
The following snippet shows how to handle final and interim results.
<SpeechToTextButton :interim-results="true" @result="onResult" />
<script setup>
const onResult = (event) => {
const { isFinal, alternatives } = event;
if (alternatives.length > 0) {
const bestMatch = alternatives[0];
console.log('Transcript:', bestMatch.transcript);
console.log('Confidence:', bestMatch.confidence);
if (isFinal) {
// Process the final result
processRecognizedText(bestMatch.transcript);
} else {
// Handle interim results (optional)
updateIntermediateUI(bestMatch.transcript);
}
}
};
</script>For more advanced usage with multiple alternatives and interim results, see SpeechToTextButton Configuration Options.
onEnd
The onEnd event is fired when the speech recognition process ends. This can happen when:
- The user clicks the button again to stop listening OR
- The speech recognition system stops automatically after detecting silence.
The following snippet logs the end of recognition.
<SpeechToTextButton @end="onEnd" />
<script setup>
const onEnd = () => {
// Update UI to indicate that listening has ended
};
</script>onError
The onError event is fired when an error occurs during the speech recognition process, including when microphone access is denied. It receives a SpeechToTextErrorEvent whose errorMessage string contains the error reported by the browser.
Common error values include:
no-speech—No speech was detected.aborted—The recognition was aborted by the user or system.audio-capture—Audio capture failed (e.g., no microphone available).network—Network communication required for recognition failed.not-allowed—The user denied permission to use the microphone.service-not-allowed—The user denied permission to use the speech recognition service.bad-grammar—There was an error in the grammar or language model.language-not-supported—The language specified is not supported.
The following snippet handles specific error values.
<SpeechToTextButton @error="onError" />
<script setup>
const onError = (event) => {
console.error('Speech recognition error:', event.errorMessage);
// Handle specific error types
switch (event.errorMessage) {
case 'not-allowed':
alert('Please allow microphone access to use speech recognition.');
break;
case 'no-speech':
console.log('No speech detected.');
break;
case 'network':
alert('Network error. Please check your connection.');
break;
default:
console.error('Speech recognition error:', event.errorMessage);
}
};
</script>