# SpeechToTextButton Events

The [Kendo UI for Angular SpeechToTextButton](https://www.telerik.com/kendo-angular-ui-develop/components/buttons/speechtotextbutton) fires a number 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 demo. The demo logs the events and the recognized text as you interact with the SpeechToTextButton.

[Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/buttons/speechtotextbutton/events/source.txt)

## Available Events

The SpeechToTextButton fires the following events:

* [`start`](https://www.telerik.com/kendo-angular-ui-develop/components/buttons/speechtotextbutton/events#start)
* [`result`](https://www.telerik.com/kendo-angular-ui-develop/components/buttons/speechtotextbutton/events#result)
* [`end`](https://www.telerik.com/kendo-angular-ui-develop/components/buttons/speechtotextbutton/events#end)
* [`error`](https://www.telerik.com/kendo-angular-ui-develop/components/buttons/speechtotextbutton/events#error)

### start

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

```typescript
public handleStart(): void {
    console.log('Speech recognition started');
}
```

### result

The [`result`](https://www.telerik.com/kendo-angular-ui-develop/components/buttons/api/speechtotextbuttoncomponent#result) event fires when a speech recognition result is available. It receives a [`SpeechToTextResultEvent`](https://www.telerik.com/kendo-angular-ui-develop/components/buttons/api/speechtotextresultevent) with the following properties:

* [`isFinal`](https://www.telerik.com/kendo-angular-ui-develop/components/buttons/api/speechtotextresultevent#isfinal)—Indicates whether the result is final (`true`) or interim (`false`).
* [`alternatives`](https://www.telerik.com/kendo-angular-ui-develop/components/buttons/api/speechtotextresultevent#alternatives)—An array of recognition results. Each item contains a `transcript` string and a `confidence` score between `0` and `1`.

With [`integrationMode`](https://www.telerik.com/kendo-angular-ui-develop/components/buttons/api/speechtotextbuttoncomponent#integrationmode) set to `none`, the `result` event does not fire. The following snippet shows how to handle final and interim results.

```typescript
public handleResult(event: SpeechToTextResultEvent): void {
    if (event.alternatives && event.alternatives.length > 0) {
        const transcript = event.alternatives[0].transcript;
        const confidence = event.alternatives[0].confidence;
        if (event.isFinal) {
            // Handle final result
            this.finalText += transcript + ' ';
        } else {
            // Handle interim result
            this.interimText = transcript;
        }
    }
}
```

For more advanced usage with multiple alternatives and interim results, see [SpeechToTextButton Configuration Options](https://www.telerik.com/kendo-angular-ui-develop/components/buttons/speechtotextbutton/speech-configurations).

### end

The [`end`](https://www.telerik.com/kendo-angular-ui-develop/components/buttons/api/speechtotextbuttoncomponent#end) event fires when speech recognition stops. 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.

```typescript
public handleEnd(): void {
    console.log('Speech recognition stopped');
}
```

### error

The [`error`](https://www.telerik.com/kendo-angular-ui-develop/components/buttons/api/speechtotextbuttoncomponent#error) event fires when a speech recognition error occurs, including when microphone access is denied. It receives a [`SpeechToTextErrorEvent`](https://www.telerik.com/kendo-angular-ui-develop/components/buttons/api/speechtotexterrorevent) whose [`errorMessage`](https://www.telerik.com/kendo-angular-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, for example when no microphone is 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 specified language is not supported.

The following snippet handles specific error values.

```typescript
public handleError(event: SpeechToTextErrorEvent): void {
    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);
    }
}
```

## Suggested Links

* [SpeechToTextButton API Reference](https://www.telerik.com/kendo-angular-ui-develop/components/buttons/api/speechtotextbuttoncomponent)
* [SpeechToTextResultEvent API](https://www.telerik.com/kendo-angular-ui-develop/components/buttons/api/speechtotextresultevent)
* [SpeechToTextButton Configuration Options](https://www.telerik.com/kendo-angular-ui-develop/components/buttons/speechtotextbutton/speech-configurations)
* [SpeechToTextButton Integration](https://www.telerik.com/kendo-angular-ui-develop/components/buttons/speechtotextbutton/integration)
* [SpeechToTextButton Appearance](https://www.telerik.com/kendo-angular-ui-develop/components/buttons/speechtotextbutton/appearance)