Having trouble getting help?
Contact Support
Contact Support
Events in Vue SpeechToText component
16 May 20254 minutes to read
This section describes the SpeechToText events that will be triggered when appropriate actions are performed. The following events are available in the SpeechToText component.
Name | Args | Description |
---|---|---|
created | - | Triggers when the SpeechToText component’s rendering is fully completed |
onStart | StartListeningEventArgs | Triggers when the speech recognition begins |
onStop | StopListeningEventArgs | Triggers when the speech recognition stops |
onError | ErrorEventArgs | Triggers when an error occurs during speech recognition or while listening. For list of possible errors, refer to the Error handling section |
transcriptChanged | TranscriptChangedEventArgs | Triggers when an transcription change occurs during the speech recognition |
The following example demonstrates how to configure the SpeechToText events.
<template>
<div id='container'>
<ejs-speechtotext id="speechtotext" @transcript-changed="onTranscriptChange" @stop="onStop" @start="onStart" @error="onError" @created="onCreated" ></ejs-speechtotext>
</div>
</template>
<script setup>
import { SpeechToTextComponent as EjsSpeechtotext } from "@syncfusion/ej2-vue-inputs";
const onTranscriptChange = (args) => {
//your required action here
};
const onStart = (args) => {
//your required action here
};
const onStop = (args) => {
//your required action here
};
const onError = (args) => {
//your required action here
};
const onCreated = () => {
//your required action here
};
</script>
<style>
@import '../node_modules/@syncfusion/ej2-base/styles/material.css';
@import '../node_modules/@syncfusion/ej2-buttons/styles/material.css';
@import '../node_modules/@syncfusion/ej2-popups/styles/material.css';
@import '../node_modules/@syncfusion/ej2-inputs/styles/material.css';
#container {
margin: 50px auto;
gap: 20px;
display: flex;
flex-direction: column;
align-items: center;
}
</style>
<template>
<div id='container'>
<ejs-speechtotext id="speechtotext" @transcript-changed="onTranscriptChange" @stop="onStop" @start="onStart" @error="onError" @created="onCreated" ></ejs-speechtotext>
</div>
</template>
<script>
import { SpeechToTextComponent } from "@syncfusion/ej2-vue-inputs";
import { enableRipple } from '@syncfusion/ej2-base';
enableRipple(true);
export default {
components: {
"ejs-speechtotext": SpeechToTextComponent
},
data() {
return {
};
},
methods: {
onTranscriptChange: function(args) {
//your required action here
},
onStart: function(args) {
//your required action here
},
onStop: function(args) {
//your required action here
},
onError: function(args) {
//your required action here
},
onCreated: function() {
//your required action here
}
}
}
</script>
<style>
@import '../node_modules/@syncfusion/ej2-base/styles/material.css';
@import '../node_modules/@syncfusion/ej2-buttons/styles/material.css';
@import '../node_modules/@syncfusion/ej2-popups/styles/material.css';
@import '../node_modules/@syncfusion/ej2-inputs/styles/material.css';
#container {
margin: 50px auto;
gap: 20px;
display: flex;
flex-direction: column;
align-items: center;
}
</style>