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

[Demo Source](https://demos.telerik.com/kendo-vue-ui/buttons/speech-to-text/events/source.txt)

## Available Events

The SpeechToTextButton fires the following events:

* [`onStart`](https://www.telerik.com/kendo-vue-ui-develop/components/buttons/speech-to-text/events#onstart)
* [`onResult`](https://www.telerik.com/kendo-vue-ui-develop/components/buttons/speech-to-text/events#onresult)
* [`onEnd`](https://www.telerik.com/kendo-vue-ui-develop/components/buttons/speech-to-text/events#onend)
* [`onError`](https://www.telerik.com/kendo-vue-ui-develop/components/buttons/speech-to-text/events#onerror)

### onStart

The [`onStart`](https://www.telerik.com/kendo-vue-ui-develop/components/buttons/api/speechtotextbuttonprops#onStart) event is fired when the user clicks the SpeechToTextButton and the speech recognition process begins.

```vue
<SpeechToTextButton @start="onStart" />

<script setup>
const onStart = () => {
    // Update UI to indicate that listening has started
};
</script>
```

### onResult

The [`onResult`](https://www.telerik.com/kendo-vue-ui-develop/components/buttons/api/speechtotextbuttonprops#onResult) event fires whenever a speech recognition result is available. It receives a [`SpeechToTextResultEvent`](https://www.telerik.com/kendo-vue-ui-develop/components/buttons/api/speechtotextresultevent).

The event object contains:

* [`isFinal`](https://www.telerik.com/kendo-vue-ui-develop/components/buttons/api/speechtotextresultevent#isFinal) (boolean)—Indicates whether this is a final result (`true`) or an interim result (`false`).
* [`alternatives`](https://www.telerik.com/kendo-vue-ui-develop/components/buttons/api/speechtotextresultevent#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.

```vue
<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](https://www.telerik.com/kendo-vue-ui-develop/components/buttons/speech-to-text/speech-configs).

### onEnd

The [`onEnd`](https://www.telerik.com/kendo-vue-ui-develop/components/buttons/api/speechtotextbuttonprops#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.

```vue
<SpeechToTextButton @end="onEnd" />

<script setup>
const onEnd = () => {
    // Update UI to indicate that listening has ended
};
</script>
```

### onError

The [`onError`](https://www.telerik.com/kendo-vue-ui-develop/components/buttons/api/speechtotextbuttonprops#onError) event is fired when an error occurs during the speech recognition process, including when microphone access is denied. It receives a [`SpeechToTextErrorEvent`](https://www.telerik.com/kendo-vue-ui-develop/components/buttons/api/speechtotexterrorevent) whose [`errorMessage`](https://www.telerik.com/kendo-vue-ui-develop/components/buttons/api/speechtotexterrorevent#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.

```vue
<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>
```

## Suggested Links

* [SpeechToTextButton API Reference](https://www.telerik.com/kendo-vue-ui-develop/components/buttons/api/speechtotextbuttonprops)
* [SpeechToTextButton Configuration Options](https://www.telerik.com/kendo-vue-ui-develop/components/buttons/speech-to-text/speech-configs)
* [SpeechToTextButton Integration](https://www.telerik.com/kendo-vue-ui-develop/components/buttons/speech-to-text/integration)
* [SpeechToTextButton Appearance](https://www.telerik.com/kendo-vue-ui-develop/components/buttons/speech-to-text/appearance)