Events in Vue SpeechToText component

9 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>