What is the most effective way to integrate webkitSpeechRecognition into a Vue.js project?

I found a demo at this link, but I'm having trouble understanding it.

Can you provide a simple implementation?

<div id="app">
  <v-app id="inspire">
    <v-container fluid>
      <v-layout row wrap justify-center class="mt-4">
        <v-flex xs12 sm10 text-xs-center>
          <v-text-field
            label="Enter text here"
            v-model="text"
            textarea
          ></v-text-field>
        </v-flex>
        <v-flex xs12 sm8 md4 text-xs-center>
          <speech-to-text :text.sync="text" @speechend="speechEnd"></speech-to-text>
        </v-flex>
        <v-flex xs12 text-xs-center class="mt-4">
          {{result}}
        </v-flex>
      </v-layout>
    </v-container>
  </v-app>
</div>
javascriptvue.jsspeech-recognitionwebkitspeechrecognition

Answer №1

I came across a more straightforward solution that looks like this:

<template>
  <div class="voice">
    <div class="speech-to-txt" @click="startSpeechToTxt">Speech to text</div>        
    <p>{{transcription_}}</p>
</div>
</template>



 <script>

  export default {
   name: 'speech_to_text',
   data() {
     return {
       runtimeTranscription_: "",
       transcription_: [],
       lang_: "es-ES"
     };
   },
   methods: {
    startSpeechToTxt() {
    // initialization of voice recognition
    
    window.SpeechRecognition =
    window.SpeechRecognition || 
    window.webkitSpeechRecognition;
    const recognition = new window.SpeechRecognition();
    recognition.lang = this.lang_;
    recognition.interimResults = true;

    // event for current voice recognition word
    recognition.addEventListener("result", event => {      
      var text = Array.from(event.results)
        .map(result => result[0])
        .map(result => result.transcript)
        .join("");
      this.runtimeTranscription_ = text;
    });
    // end of transcription
    recognition.addEventListener("end", () => {
      this.transcription_.push(this.runtimeTranscription_);
      this.runtimeTranscription_ = "";
      recognition.stop();
    });
     recognition.start();
   },

   }
  }
  </script>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Encountering errors preventing the utilization of helpers in fancybox2-rails gem

I've been struggling to implement fancybox2 in my RoR app. I've attempted using the gem and manually adding the files to my assets directory, but I'm having issues with the helpers. Currently, the thumb images generated by the helper are no ...

javascriptjqueryruby-on-railsfancyboxfancybox-2

How can I position two divs side by side within an Appbar?

I would like the entire Container to be in a single row, with the Typography centered as it already is, and the toggle-container to float to the right <AppBar className={styles.AppBar}> <Toolbar> <Container> ...

javascriptcssreactjsflexboxmaterial-ui

What is the best way to set up a task scheduler using node-cron in a Vue.js

Following the documentation in Node.js, each * symbol has a specific meaning. cron.schedule('* * * * *', () => { console.log('running a task every minute'); }); # ┌────────────── second (optional) # ...

node.jsvue.jscronnode-cron

Encountering flickering navigation bar on Vue.js platform

In my navbar, there's a flicker before the function evaluates to true or false. Here is the function that needs to be evaluated: export default { methods: { isAuthenticated () { return this.$store.state.user.authenticated } }, da ...

vue.jsvuex

What advantages does using `prestart` offer compared to `&&` in a command within `package.json`?

I believe the title speaks for itself, but let's dive in: What advantages does using the pre-script of npm package.json, like prestart, have over simply combining commands with && in the start script? { prestart: "parcel build", start "n ...

javascriptnpmpackage.json

Expressjs route encountering issue with imported database function failing to return a value

Currently, I am in the process of creating a REST API using Expressjs. Initially, all routes were integrated into one main file. However, I have now separated these routes, database connection, and database methods into their individual files. login-db.js ...

javascriptnode.jsexpress

Utilizing ReactJS to retrieve configuration settings from a YAML file, similar to how it is done

Our team is currently using a full-stack multi-microservice application where the backend java components utilize the spring @value annotation to fetch configuration values from a yml file. This method has been effective and even the Java side of our UI c ...

javascriptjavareactjsspringconfiguration

Trouble arises when attempting to showcase document fields in MongoDB

As a beginner in programming, I am putting in my best effort to figure things out on my own. However, I seem to be stuck without any guidance. I am attempting to display all products from the mongoDB based on their brand. While I have successfully set up a ...

javascriptmongodbexpressmongoosemongodb-query

Ways to display the page's content within a div container utilizing Jquery

I am attempting to display the content of a URL page (such as ) within a <div> using JQuery, but so far I have been unsuccessful. Here is an example of what I am trying to achieve: <div id="contUrl"> .. content of google.fr page </div> ...

javascriptjqueryhtml

Struggling to understand the functionality of vue-router

I am currently working on a Vue.js project that includes the following router setup: import Vue from 'vue'; import Router from 'vue-router'; import Overview from '@/components/Overview'; import Experiment from '@/compone ...

vue.jsvue-router

Incorporate an external script into your Vue.js application

Seeking to integrate a simple JavaScript script with an external link to the library into my Vue.js application, I have encountered the following: <script type="text/javascript" src="https://my_site/index.js"></script> <link rel="styleshee ...

javascriptvue.js

Dealing with unexpected modifications in a React class component

In short, I need to adjust the data in my class component before sending it to the server to match the API request format. To achieve this, I created a method called transformData within my class component which transforms the data extracted from the state ...

javascriptreactjsnext.js

Hover and hover-off functions in navigation menu

html <div class="hidden-nav"> <h4>lorem</h4> <ul class="decor-menu-list"> <li><a href="#">123</a></li> <li><a href="#">123</a></li> <li><a hre ...

javascriptjqueryhtmlcss

Implementing an API route to access a file located within the app directory in Next.js

Struggling with Nextjs has been a challenge for me. Even the most basic tasks seem to elude me. One specific issue I encountered is with an API call that should return 'Logged in' if 'Me' is entered, and display a message from mydata.tx ...

javascriptnext.jsroutes

Using Vue.Js and Inertia.js with Laravel to paginate search results

Currently, I am working on paginating data sourced from Laravel within Vue.Js, along with utilizing Inertia.js Within my Laravel Controller, the code snippet looks like this: $data['participants'] = User::with('groups')->select(&ap ...

laravelvue.jsinertiajs

What is the process for adding a highlighted area beneath a curve on a high chart?

I am working on creating a high chart with Angular 4 and I have a specific requirement to highlight certain portions of the Highchart. For example, in the image: In the image above, if a data point value drops below a certain limit (such as 0), it shoul ...

javascriptjqueryangularhighchartshighlight

Once the getComponent is fully executed, move on to the getIndexRoute function

Within my react-router routes, I implemented plainRoutes in the following manner: getComponent (nextState, cb) { require.ensure([], (require) => { const CoreLayout = require('../layouts/CoreLayout/CoreLayout').default const u ...

javascriptreactjsreduxreact-router

Creating a visual selection menu with icon options using jQuery or a similar framework

Currently, I am working on designing an HTML form that includes a field where users must select from a set of options such as sunny, cloudy, rainy, and more. I am seeking a creative alternative to using the <select> or <radio> input elements. ...

javascriptjqueryhtmljquery-pluginsselectlist

SyntaxError in ExpressJS: Encountered an unexpected token "C"

I'm having trouble saving my string to a comma-separated array. When I attempt to use the JSON.parse method, I encounter an error while sending a post request and trying to save a record: SyntaxError: Unexpected token c at Object.parse (native) ...

javascriptjsonnode.jsparsingexpress

What is the best way to compile TypeScript files without them being dependent on each other?

I have created a TypeScript class file with the following code: class SampleClass { public load(): void { console.log('loaded'); } } Now, I also have another TypeScript file which contains functions that need to utilize this class: // ...

javascripttypescriptvisual-studio