CODEWITHSUNDEEP
javascriptwebkitspeech-recognitionvuejs2vue-component
Alexey Rodionov
Alexey Rodionov

Reputation: 123

Vue.js webkitSpeechRecognition integration

I need to connect webkitSpeechRecognition to my Vue.js project (for Chrome).

I'm trying to insert code into component

<template>
      <div class="voice">
        <h1>{{ msg }}</h1>
        <button v-on:click="greet">Speak</button>
      </template>

      <script>
      export default {
        name: 'voice',
        data () {
          return {
            msg: 'Speak',
          }
        },
        methods: {
          greet: function (event) {

          }
        }
      }
      </script>

this code

var recognition = new (SpeechRecognition || webkitSpeechRecognition || mozSpeechRecognition || msSpeechRecognition)();
recognition.lang = 'en-US';
recognition.interimResults = false;
recognition.maxAlternatives = 5;
recognition.start();

recognition.onresult = function(event) {
    console.log('You said: ', event.results[0][0].transcript);
};

but i have error "webkitSpeechRecognition is not defined"

Upvotes: 0

Views: 3010

Answers (1)

Alexey Rodionov
Alexey Rodionov

Reputation: 123

I solved it with this line:

var recognition = new window.webkitSpeechRecognition

Upvotes: 5

Related Questions