vue-utter-content

Demo

Codesandbox Example

Installation

npm install --save vue-utter-content

or

yarn add vue-utter-content

Declaration

Global Import (In main.js file)

import VUC from "vue-utter-content";
import "vue-utter-content/dist/vuc.css";
Vue.component("VUC", VUC);

Local Import (In any component)

<script>
import VUC from "vue-utter-content";
import "vue-utter-content/dist/vuc.css";

export default {
  components: {
    VUC
  }
}
<script>

Basic Usage

Example-1

<template>
  <div>
    <textarea v-model="body"></textarea>
    <VUC
      :text="body"
      @speechend="body = $event.text"
    ></VUC>
  </div>
<template>
<script>
export default {
  name: "MyComponent",
  data() {
		return {
			body: "Hello World",
		};
	},
}

Example-2

<template>
  <div>
    <textarea v-model="body"></textarea>
    <VUC
      :text="body"
      lang="fr-FR"
      header_title="Commencer à parler"
      placeholder="le texte parlé sera ici..."
      quit_label="Fermer"
      clear_label="Effacer le texte"
      start_label="Début"
      stop_label="Arrêter"
      save_label="sauver"
      @speechend="body = $event.text"
    ></VUC>
  </div>
<template>
<script>
export default {
  name: "MyComponent",
  data() {
		return {
			body: "Bonjour le monde",
		};
	},
}
</script>

Properties

| Name | Type | Required | Default Value | Support Values | | ---- | ---- |--------- |------------ |--------------- | | text | String | Yes | - | any string| | lang | String | No | "en-US" | BCP-47 Languages Codes (go to this link and scroll down for language codes)| | header_title | String | No | "Speech To Text" | any string| | placeholder | String | No | "start speaking and text will display here..." | any string | | quit_label | String | No | "Quit" | any string | | clear_label | String | No | "Clear" | any string | | start_label | String | No | "Start Speaking" | any string | | stop_label | String | No | "Stop" | any string | | save_label | String | No | "Save & Exit" | any string |

Events

• speechend

  This event will fire when user stop speaking and save the content. i.e-

   <template>
    <VUC :text="text" @speechend="onSpeechEnd"></VUC>
   </template>
  
   <script>
    export default {
      methods:{
        onSpeechEnd(event) {
          console.log(event)
        }
      }
    }
   </script>