Contents
- Start listening
- Stop listening
Having trouble getting help?
Contact Support
Contact Support
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>