Globalization in EJ2 JavaScript SpeechToText control
15 Apr 202510 minutes to read
Localization
The SpeechToText can be localized to any culture by defining the text in the corresponding culture. The default locale of the SpeechToText is en-US (English). The following table represents the default text of the SpeechToText in en-US culture.
| KEY | Text |
|---|---|
| abortedError | Speech recognition was aborted. |
| audioCaptureError | No microphone detected. Ensure your microphone is connected. |
| defaultError | An unknown error occurred. |
| networkError | Network error occurred. Check your internet connection. |
| noSpeechError | No speech detected. Please speak into the microphone. |
| notAllowedError | Microphone access denied. Allow microphone permissions. |
| serviceNotAllowedError | Speech recognition service is not allowed in this context. |
| unsupportedBrowserError | The browser does not support the SpeechRecognition API. |
| startAriaLabel | Press to start speaking and transcribe your words |
| stopAriaLabel | Press to stop speaking and end transcription |
| startTooltipText | Start listening |
| stopTooltipText | Stop listening |
ej.base.L10n.load({
'de': {
"speech-to-text": {
"abortedError": "Die Spracherkennung wurde abgebrochen.",
"audioCaptureError": "Kein Mikrofon erkannt. Stellen Sie sicher, dass Ihr Mikrofon angeschlossen ist.",
"defaultError": "Ein unbekannter Fehler ist aufgetreten.",
"networkError": "Netzwerkfehler aufgetreten. Überprüfen Sie Ihre Internetverbindung.",
"noSpeechError": "Keine Sprache erkannt. Bitte sprechen Sie in das Mikrofon.",
"notAllowedError": "Mikrofonzugriff verweigert. Erlauben Sie Mikrofonberechtigungen.",
"serviceNotAllowedError": "Der Spracherkennungsdienst ist in diesem Kontext nicht erlaubt.",
"unsupportedBrowserError": "Der Browser unterstützt die SpeechRecognition API nicht.",
"startAriaLabel": "Drücken Sie, um zu sprechen und Ihre Worte zu transkribieren",
"stopAriaLabel": "Drücken Sie, um das Sprechen zu beenden und die Transkription zu stoppen",
"startTooltipText": "Zuhören starten",
"stopTooltipText": "Zuhören beenden"
}
}
});
// Initializes the SpeechToText control
var speechToText = new ej.inputs.SpeechToText({
locale: 'de',
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');<!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>
<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>RTL
RTL provides an option to switch the text direction and layout of the SpeechToText control from right to left by setting the enableRtl property to true.
// Initializes the SpeechToText control
var speechToText = new ej.inputs.SpeechToText({
buttonSettings: {
content: 'Start Listening',
stopContent: 'Stop Listening'
},
enableRtl: true,
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');<!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>
<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>