React SpeechToText - customSpeechRecognizer

Allows you to implement custom speech recognition engines.

Selector: CustomSpeechRecognizer
Type:

CustomSpeechRecognizer

If you want to integrate a custom speech recognition engine, set customSpeechRecognizer.enabled to true. When you implement a custom speech recognizer, SpeechToText no longer does the following:

  • Listens to user speech.
  • Updates the component state. Set the SpeechToText state using the customSpeechRecognizer.isListening property.
  • Calls the onResult and onError handlers.

enabled

Specifies whether a custom speech recognition engine is implemented.

Type:

Boolean

Default Value: false

isListening

Indicates whether the custom speech recognition engine is listening.

Type:

Boolean

Default Value: false

Modify isListening to update the component state:

jQuery
index.js
$('#speech-to-text').dxSpeechToText({
    customSpeechRecognizer: {
        enabled: true,
    },
    onStartClick(e) {
        e.component.option('customSpeechRecognizer.isListening', true);
    },
    onStopClick(e) {
        e.component.option('customSpeechRecognizer.isListening', false);
    },
})
Angular
app.component.html
app.component.ts
<dx-speech-to-text
    (onStartClick)="handleStartClick($event)"
    (onStopClick)="handleStopClick($event)"
>
    <dxo-speech-to-text-custom-speech-recognizer
        [enabled]="true"
    ></dxo-speech-to-text-custom-speech-recognizer>
</dx-speech-to-text>
import { DxSpeechToTextComponent, type DxSpeechToTextTypes } from 'devextreme-angular/ui/speech-to-text';

// ...
export class AppComponent {
    handleStartClick(e: DxSpeechToTextTypes.StartClickEvent) {
        e.component.option('customSpeechRecognizer.isListening', true);
    }

    handleStopClick(e: DxSpeechToTextTypes.StopClickEvent) {
        e.component.option('customSpeechRecognizer.isListening', false);
    }
}
Vue
App.vue
<template>
    <DxSpeechToText
        @start-click="handleStartClick"
        @stop-click="handleStopClick"
    >
        <DxCustomSpeechRecognizer
            :enabled="true"
        />
    </DxSpeechToText>
</template>

<script setup lang="ts">
import { DxSpeechToText, DxCustomSpeechRecognizer, type DxSpeechToTextTypes } from 'devextreme-vue/speech-to-text';

function handleStartClick(e: DxSpeechToTextTypes.StartClickEvent) {
    e.component.option('customSpeechRecognizer.isListening', true);
}

function handleStopClick(e: DxSpeechToTextTypes.StopClickEvent) {
    e.component.option('customSpeechRecognizer.isListening', false);
}
</script>
React
App.tsx
import React from 'react';
import { SpeechToText, CustomSpeechRecognizer, type SpeechToTextTypes } from 'devextreme-react/speech-to-text';

function handleStartClick(e: SpeechToTextTypes.StartClickEvent): void {
    e.component.option('customSpeechRecognizer.isListening', true);
}

function handleStopClick(e: SpeechToTextTypes.StopClickEvent): void {
    e.component.option('customSpeechRecognizer.isListening', false);
}

function App(): JSX.Element {
    return (
        <SpeechToText
            onStartClick={handleStartClick}
            onStopClick={handleStopClick}
        >
            <CustomSpeechRecognizer
                enabled={true}
            />
        </SpeechToText>
    );
}

This property affects the SpeechToText icon (startIcon/stopIcon), text (startText/stopText), and click handler (onStartClick/onStopClick).