# SpeechToTextButton Configuration Options

The [Kendo UI for Vue SpeechToTextButton](https://www.telerik.com/kendo-vue-ui-develop/components/buttons/speech-to-text) 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-vue-ui-develop/components/buttons/speech-to-text/speech-configs#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-vue-ui-develop/components/buttons/speech-to-text/speech-configs#interim-results)—Allow the SpeechToTextButton to provide interim results while the user is still speaking.
* [Multiple recognition alternatives](https://www.telerik.com/kendo-vue-ui-develop/components/buttons/speech-to-text/speech-configs#multiple-recognition-alternatives)—Enable the SpeechToTextButton to return multiple recognition alternatives for a given speech input.
* [Language recognition](https://www.telerik.com/kendo-vue-ui-develop/components/buttons/speech-to-text/speech-configs#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-vue-ui/buttons/speech-to-text/combined-features/source.txt)

## Continuous Recognition

The [`continuous`](https://www.telerik.com/kendo-vue-ui-develop/components/buttons/api/speechtotextbuttonprops#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; the browser may still end the session.

```vue
<SpeechToTextButton :continuous="true" @result="onResult" />
```

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 `result` event fires for each recognized phrase.

The following example demonstrates continuous recognition.

[Demo Source](https://demos.telerik.com/kendo-vue-ui/buttons/speech-to-text/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-vue-ui-develop/components/buttons/api/speechtotextbuttonprops#interimResults) property to `true`:

```vue
<SpeechToTextButton :interim-results="true" @result="onResult" />
```

When interim results are enabled:

* The `result` event fires multiple times during speech recognition.
* The `isFinal` property of the [`SpeechToTextResultEvent`](https://www.telerik.com/kendo-vue-ui-develop/components/buttons/api/speechtotextresultevent) indicates whether the result is final or interim.
* Interim results may change as the 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-vue-ui-develop/components/buttons/api/speechtotextresultevent):

```vue
<script setup>
const onResult = (event) => {
    if (event.alternatives.length > 0) {
        const transcript = event.alternatives[0].transcript;

        if (event.isFinal) {
            finalText.value += transcript + ' ';
            interimText.value = '';
        } else {
            interimText.value = transcript;
        }
    }
};
</script>
```

The following example demonstrates the interim results functionality.

[Demo Source](https://demos.telerik.com/kendo-vue-ui/buttons/speech-to-text/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-vue-ui-develop/components/buttons/api/speechtotextbuttonprops#maxAlternatives) property:

```vue
<SpeechToTextButton :max-alternatives="3" @result="onResult" />
```

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-vue-ui-develop/components/buttons/api/speechtotextresultevent) `alternatives` array contains:

* `transcript`—The recognized text.
* `confidence`—A confidence score from `0` to `1` that indicates the engine's certainty.

Process the multiple alternatives in your event handler:

```vue
<script setup>
const onResult = (event) => {
    if (event.alternatives.length > 0) {
        allAlternatives.value = event.alternatives;

        const bestAlternative = event.alternatives.reduce((best, current) =>
            current.confidence > best.confidence ? current : best
        );

        selectedTranscript.value = bestAlternative.transcript;
    }
};
</script>
```

The following example demonstrates multiple recognition alternatives.

[Demo Source](https://demos.telerik.com/kendo-vue-ui/buttons/speech-to-text/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-vue-ui-develop/components/buttons/api/speechtotextbuttonprops#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`](https://www.telerik.com/kendo-vue-ui-develop/components/buttons/api/speechtotextbuttonprops#lang) property to a valid BCP 47 language tag (for example, `'en-US'` for American English, `'de-DE'` for German, or `'es-ES'` for Spanish).

```vue
<SpeechToTextButton lang="es-ES" />
```

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

The following example lets you select from sample language tags offered by the demo.

[Demo Source](https://demos.telerik.com/kendo-vue-ui/buttons/speech-to-text/language-selection/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-vue-ui-develop/components/buttons/api/speechtotextbuttonprops#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 Integration](https://www.telerik.com/kendo-vue-ui-develop/components/buttons/speech-to-text/integration)
* [SpeechToTextButton Events](https://www.telerik.com/kendo-vue-ui-develop/components/buttons/speech-to-text/events)
* [SpeechToTextButton API Reference](https://www.telerik.com/kendo-vue-ui-develop/components/buttons/api/speechtotextbuttonprops)
* [Web Speech API: SpeechRecognition](https://developer.mozilla.org/en-US/docs/Web/API/SpeechRecognition)