Globalization in Vue SpeechToText component

16 May 202511 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 
<template>
  <div id='container'>
    <ejs-speechtotext id="speechtotext" ref="speechToTextInstance" @transcript-changed="onTranscriptChange" locale="de"></ejs-speechtotext>
    <ejs-textarea v-model="textareaValue" rows="5" cols="50" resizeMode="None" placeholder="Transcribed text will be shown here..."></ejs-textarea>
  </div>
</template>

<script setup>
import { ref } from "vue";
import { SpeechToTextComponent as EjsSpeechtotext, TextAreaComponent as EjsTextarea } from "@syncfusion/ej2-vue-inputs";
import { L10n } from '@syncfusion/ej2-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"
    }
  }
});

const textareaValue = ref('');

const onTranscriptChange = (args) => {
  textareaValue.value = args.transcript;
};

</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" ref="speechToTextInstance" @transcript-changed="onTranscriptChange" :locale="locale"></ejs-speechtotext>
    <ejs-textarea ref="textareaObj" rows="5" cols="50" resizeMode="None" placeholder="Transcribed text will be shown here..."></ejs-textarea>
  </div>
</template>

<script>
import { SpeechToTextComponent, TextAreaComponent } from "@syncfusion/ej2-vue-inputs";
import { L10n } from '@syncfusion/ej2-base';

export default {
  components: {
    "ejs-speechtotext": SpeechToTextComponent,
    "ejs-textarea": TextAreaComponent
  },
  data() {
    return {
      locale: 'de'
    };
  },
  methods: {
    onTranscriptChange: function(args) {
      this.$refs.textareaObj.ej2Instances.value = args.transcript;
    }
  },
  beforeCreate: function() {
    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"
        }
      }
    });
  }
}
</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>

RTL

RTL provides an option to switch the text direction and layout of the SpeechToText component from right to left by setting the enableRtl property to true.

<template>
  <div id='container'>
    <ejs-speechtotext id="speechtotext" @transcript-changed="onTranscriptChange" :button-settings="buttonSettings" enable-rtl="true"></ejs-speechtotext>
    <ejs-textarea v-model="textareaValue" rows="5" cols="50" resizeMode="None" placeholder="Transcribed text will be shown here..."></ejs-textarea>
  </div>
</template>

<script setup>
import { ref } from "vue";
import { SpeechToTextComponent as EjsSpeechtotext, TextAreaComponent as EjsTextarea } from "@syncfusion/ej2-vue-inputs";

const textareaValue = ref('');

const buttonSettings = {
  content: 'Start Listening',
  stopContent: 'Stop Listening'
};

const onTranscriptChange = (args) => {
  textareaValue.value = args.transcript;
};

</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" @transcriptChanged="onTranscriptChange" :buttonSettings='buttonSettings' enable-rtl="true"></ejs-speechtotext>
      <ejs-textarea ref="textareaObj" rows="5" cols="50" value="" resize-mode="None" placeholder="Transcribed text will be shown here..."></ejs-textarea>
  </div>
</template>

<script>
import { SpeechToTextComponent, TextAreaComponent  } from "@syncfusion/ej2-vue-inputs";
import { enableRipple } from '@syncfusion/ej2-base';
enableRipple(true);

export default {
  components: {
    "ejs-speechtotext": SpeechToTextComponent,
    "ejs-textarea": TextAreaComponent
  },
  data() {
    return {
      buttonSettings: {
        content: 'Start Listening',
        stopContent: 'Stop Listening'
      }
    };
  },
  methods: {
    onTranscriptChange: function(args) {
      this.$refs.textareaObj.ej2Instances.value = args.transcript;
    }
  }
}
</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>