Vue.js webkitSpeechRecognition 集成

Question

我需要将 webkitSpeechRecognition 连接到我的 Vue.js 项目（适用于 Chrome）。

我正在尝试将代码插入到组件中

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

这段代码

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);
};

但我有错误“未定义 webkitSpeechRecognition”

Answer 1

我用这一行解决了它：

var recognition = new window.webkitSpeechRecognition