Methods in EJ2 JavaScript SpeechToText control

15 Apr 20254 minutes to read

Start listening

You can use the startListening public method to initiate the speech recognition and begins the conversion of the speech to text.

Stop listening

You can use the stopListening public method to stop capturing your speech and ends the speech recognition.

Below sample demonstrates the SpeechToText control configured with above methods.

// Initializes the SpeechToText control
var speechToText = new ej.inputs.SpeechToText({
    transcriptChanged: (args) => {
        textareaObj.value = args.transcript;
    }
});

// Render initialized SpeechToText.
speechToText.appendTo('#speechtotext_default');

var textareaObj = new ej.inputs.TextArea({
    rows: 5,
    cols: 50,
    value: '',
    resizeMode: 'None',
    placeholder: 'Transcribed text will be shown here...'
});
textareaObj.appendTo('#textareaInst');

let startButton = new ej.buttons.Button({
    content: 'Start Listening',
});
startButton.appendTo('#startListening');
startButton.element.onclick = () => {
    speechToText.startListening();
};

let stopButton = new ej.buttons.Button({
    content: 'Stop Listening',
});
stopButton.appendTo('#stopListening');
stopButton.element.onclick = () => {
    speechToText.stopListening();
};
<!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/30.1.37/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/30.1.37/ej2-buttons/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/30.1.37/ej2-popups/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/30.1.37/ej2-inputs/styles/material.css" rel="stylesheet" />

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

    <script src="https://cdn.syncfusion.com/ej2/30.1.37/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">
        <div class="actions">
            <button id="startListening"></button>
            <button id="stopListening"></button>
        </div>
        <button id="speechtotext_default"></button>
        <textarea id="textareaInst"></textarea>
    </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>