Globalization in Vue SpeechToText component

9 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

Composition API (~/src/App.vue)

<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>

Options API (~/src/App.vue)

<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.

Composition API (~/src/App.vue)

<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>

Options API (~/src/App.vue)

<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>