Events in EJ2 JavaScript SpeechToText control

15 Apr 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 control.

Name Args Description
created - Triggers when the SpeechToText control’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.

// Initializes the SpeechToText control
var speechToText = new ej.inputs.SpeechToText({
    created: ()=>{
        //your required action here
    },
    onStop: (args) => {
        //your required action here
    },
    onStart: (args) => {
        //your required action here
    },
    onError: (event) => {
        //your required action here
    },
    transcriptChanged: (args) => {
        //your required action here
    }
});

// Render initialized SpeechToText.
speechToText.appendTo('#speechtotext_default');
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Essential JS 2 - SpeechToText</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <meta name="description" content="Essential JS 2">
    <meta name="author" content="Syncfusion">
    <link href="https://cdn.syncfusion.com/ej2/31.1.17/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/31.1.17/ej2-buttons/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/31.1.17/ej2-popups/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/31.1.17/ej2-inputs/styles/material.css" rel="stylesheet" />

    <!--style reference from app-->
    <link href="index.css" rel="stylesheet">

    <script src="https://cdn.syncfusion.com/ej2/31.1.17/dist/ej2.min.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>

    <div id="container">
        <button id="speechtotext_default"></button>
    </div>

    <script>
        var ele = document.getElementById('container');
        if (ele) {
            ele.style.visibility = "visible";
        }   
    </script>
    <style>
        #container {
            margin: 50px auto;
            gap: 20px;
            display: flex;
            flex-direction: column;
            align-items: center;
        }
    </style>

    <script src="index.js" type="text/javascript"></script>
</body>

</html>