JavaScript/jQuery SpeechToText - customSpeechRecognizer
Allows you to implement custom speech recognition engines.
Type:
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:
Default Value: false
isListening
Indicates whether the custom speech recognition engine is listening.
Type:
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).
Feedback