# SpeechToTextButton Configuration Options

The [Kendo UI for Angular SpeechToTextButton](https://www.telerik.com/kendo-angular-ui-develop/components/buttons/speechtotextbutton) offers various configuration options for controlling how speech recognition works. To enhance the speech recognition experience of the component, you can configure how it handles speech input and provides recognition results.

The SpeechToTextButton provides options for:

* [Continuous recognition](https://www.telerik.com/kendo-angular-ui-develop/components/buttons/speechtotextbutton/speech-configurations#continuous-recognition)—Enable the SpeechToTextButton to keep listening for additional speech input without requiring the user to click the button again.
* [Interim results](https://www.telerik.com/kendo-angular-ui-develop/components/buttons/speechtotextbutton/speech-configurations#interim-results)—Allow the SpeechToTextButton to provide interim results while the user is still speaking.
* [Multiple recognition alternatives](https://www.telerik.com/kendo-angular-ui-develop/components/buttons/speechtotextbutton/speech-configurations#multiple-recognition-alternatives)—Enable the SpeechToTextButton to return multiple recognition alternatives for a given speech input.
* [Language recognition](https://www.telerik.com/kendo-angular-ui-develop/components/buttons/speechtotextbutton/speech-configurations#language-recognition)—Configure the SpeechToTextButton to recognize speech in different languages by specifying a BCP 47 language tag.

The following example combines continuous recognition, interim results, and multiple recognition alternatives.

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

## Continuous Recognition

The [`continuous`](https://www.telerik.com/kendo-angular-ui-develop/components/buttons/api/speechtotextbuttoncomponent#continuous) property determines whether recognition continues after it returns a result. It defaults to `false`, so the SpeechToTextButton stops listening after recognizing a single phrase. Set it to `true` to keep listening for additional speech input without requiring the user to click the button again.

```html
<button kendoSpeechToTextButton 
        [continuous]="true"
        (result)="handleResult($event)">
    Click to speak
</button>
```

When continuous recognition is enabled:

* The button remains active and continues listening after recognizing speech.
* Multiple phrases can be recognized in sequence.
* The recognition session can continue until the user stops it, an error occurs, or the browser ends it.
* The component fires multiple `result` events as different phrases are recognized.

The following example demonstrates continuous recognition in action.

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

## Interim Results

The SpeechToTextButton can provide interim (in-progress) results while the user is still speaking. This feature is useful for creating real-time speech-to-text experiences where users can see their words appear as they speak. For example, when working with voice input in messenger or note taking apps.

By default, the component returns only final results.
To enable interim results, set the [`interimResults`](https://www.telerik.com/kendo-angular-ui-develop/components/buttons/api/speechtotextbuttoncomponent#interimResults) property to `true`:

```html
<button kendoSpeechToTextButton 
        [interimResults]="true"
        (result)="handleResult($event)">
    Click to speak
</button>
```

When interim results are enabled:

* The `result` event fires multiple times during speech recognition.
* Each result event contains the `isFinal` property indicating whether the result is final or interim.
* Interim results may change as the speech recognition engine processes more audio.
* Final results are provided when the engine has completed processing a phrase.

To handle interim results, check the `isFinal` property on the [`SpeechToTextResultEvent`](https://www.telerik.com/kendo-angular-ui-develop/components/buttons/api/speechtotextresultevent):

```typescript
import { SpeechToTextResultEvent } from '@progress/kendo-angular-buttons';

export class AppComponent {
    public finalText = '';
    public interimText = '';
    
    public handleResult(event: SpeechToTextResultEvent): void {
        if (event.alternatives && event.alternatives.length > 0) {
            const transcript = event.alternatives[0].transcript;
            
            if (event.isFinal) {
                this.finalText += transcript + ' ';
                this.interimText = '';
            } else {
                this.interimText = transcript;
            }
        }
    }
}
```

The following example demonstrates the interim results functionality.

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

## Multiple Recognition Alternatives

The speech recognition engine can provide multiple alternative transcripts for the same audio input. This is useful when you want to give users choices or implement custom logic to select the best transcript.

To configure the number of transcripts provided, set the [`maxAlternatives`](https://www.telerik.com/kendo-angular-ui-develop/components/buttons/api/speechtotextbuttoncomponent#maxAlternatives) property:

```html
<button kendoSpeechToTextButton 
        [maxAlternatives]="3"
        (result)="handleResult($event)">
    Click to speak
</button>
```

By default, the component requests one transcript. The recognition engine may return fewer alternatives than requested.

Each alternative in the [`SpeechToTextResultEvent`](https://www.telerik.com/kendo-angular-ui-develop/components/buttons/api/speechtotextresultevent) `alternatives` array contains:

* `transcript`—The recognized text.
* `confidence`—A confidence score (0-1) indicating the engine's certainty.

Process the multiple alternatives in your event handler:

```typescript
import { SpeechToTextResultEvent } from '@progress/kendo-angular-buttons';

export class AppComponent {
    public selectedTranscript = '';
    public allAlternatives: Array<{transcript: string, confidence: number}> = [];
    
    public handleResult(event: SpeechToTextResultEvent): void {
        if (event.alternatives && event.alternatives.length > 0) {
            this.allAlternatives = event.alternatives.map(alt => ({
                transcript: alt.transcript,
                confidence: alt.confidence
            }));
            
            const bestAlternative = this.allAlternatives.reduce((best, current) => 
                current.confidence > best.confidence ? current : best
            );
            
            this.selectedTranscript = bestAlternative.transcript;
        }
    }
}
```

The following example demonstrates multiple recognition alternatives.

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

## Language Recognition

The SpeechToTextButton supports recognizing speech in different languages by specifying a [BCP 47](https://tools.ietf.org/html/bcp47) language tag through the [`lang`](https://www.telerik.com/kendo-angular-ui-develop/components/buttons/api/speechtotextbuttoncomponent#lang) property. This allows you to tailor the speech recognition experience to your application's audience and support multilingual scenarios.

### Language Selection

To configure the language for speech recognition, set the `lang` property to the desired BCP 47 language tag (for example, `'en-US'` for American English, `'de-DE'` for German, or `'es-ES'` for Spanish).

```html
<button kendoSpeechToTextButton lang="es-ES"></button>
```

By default, the SpeechToTextButton uses `'en-US'` (American English) if no language is specified.

The following example demonstrates how to set the language for the SpeechToTextButton.

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

### Language Support

The demo's language tags are examples, not a complete or guaranteed list. Available languages depend on the speech recognition engine. When [`integrationMode`](https://www.telerik.com/kendo-angular-ui-develop/components/buttons/api/speechtotextbuttoncomponent#integrationmode) is `webSpeech`, refer to the [Web Speech API list of supported languages](https://developer.mozilla.org/en-US/docs/Web/API/SpeechRecognition/lang#languages) and [browser compatibility table](https://developer.mozilla.org/en-US/docs/Web/API/Web_Speech_API#browser_compatibility). When `integrationMode` is `none`, a custom provider must handle the language and recognition settings it supports.

## Suggested Links

* [SpeechToTextButton API Reference](https://www.telerik.com/kendo-angular-ui-develop/components/buttons/api/speechtotextbuttoncomponent)
* [Web Speech API: SpeechRecognition](https://developer.mozilla.org/en-US/docs/Web/API/SpeechRecognition)
* [SpeechToTextButton Events](https://www.telerik.com/kendo-angular-ui-develop/components/buttons/speechtotextbutton/events)
* [SpeechToTextButton Integration](https://www.telerik.com/kendo-angular-ui-develop/components/buttons/speechtotextbutton/integration)