Speech recognition 语音识别-Vue.JS

我正在vue.js上运行一个简单的语音识别代码

<template>
  <div>
    <button class="speech-to-txt" @click="startRecognition">
      Speech to txt
    </button>

    <div class="speech-transciption">
      <div>{{ runtimeTranscription }}</div>

      <textarea v-model="transcription" ref="inputTextArea" id="caixa-texto">
      </textarea>
    </div>
  </div>
</template>


<script>
export default {
  name: "vue-speech-recognition",
  props: {
    lang: {
      type: String,
      default: "en-US",
    },
  },
  data: () => ({
    runtimeTranscription: "",
    transcription: [],
    recognition: null,
  }),
  methods: {
    startRecognition() {
      console.log("Starting");
      this.checkApi();
      this.recognition.start();
    },
    stopRecognition() {
      console.log("Stopping");
      this.recognition.stop();
      this.recognition = null;
    },
    checkApi() {
      window.SpeechRecognition =
        window.SpeechRecognition || window.webkitSpeechRecognition;
      if (!SpeechRecognition && "development" !== "production") {
        throw new Error(
          "Speech Recognition does not exist on this browser. Use Chrome or Firefox"
        );
      }
      if (!SpeechRecognition) {
        console.log("No Speech Recognition");
        return;
      }
      console.log("Starting UP");
      this.recognition = new SpeechRecognition();

      this.recognition.lang = this.lang;
      this.recognition.interimResults = true;
      this.recognition.addEventListener("result", (event) => {
        console.log("result");
        const text = Array.from(event.results)
          .map((result) => result[0])
          .map((result) => result.transcript)
          .join("");
        this.runtimeTranscription = text;
      });
      this.recognition.addEventListener("end", () => {
        console.log("End");
        if (this.runtimeTranscription !== "") {
          this.transcription.push(this.runtimeTranscription);
          this.$emit("onTranscriptionEnd", {
            transcription: this.transcription,
            lastSentence: this.runtimeTranscription,
          });
        } else {
          console.log("Nothing Found");
        }
        this.runtimeTranscription = "";
      });
      this.recognition.onresult = function (event) {
        var color = event.results[0][0].transcript;
        console.log(color);
      };
    },
  },
  mounted() {
    this.checkApi();
  },
};
</script>

语音转换
{{runtimeTranscription}}
导出默认值{
名称：“vue语音识别”，
道具：{
朗：{
类型：字符串，
默认值：“en US”，
},
},
数据：（）=>({
运行时转录：“”，
转录：[]，
识别：空，
}),
方法：{
startRecognition（）{
控制台日志（“启动”）；
this.checkApi（）；
这个.recognition.start（）；
},
停止识别（）{
控制台日志（“停止”）；
这个.recognition.stop（）；
此参数为空；
},
checkApi（）{
语音识别=
window.SpeechRecognition | | window.webkitSpeechRecognition；
if（！SpeechRecognition&“development”！=“production”）{
抛出新错误(
“此浏览器上不存在语音识别。请使用Chrome或Firefox”
);
}
如果（！语音识别）{
console.log（“无语音识别”）；
返回；
}
控制台日志（“启动”）；
this.recognition=newspeechrecognition（）；
this.recognition.lang=this.lang；
this.recognition.interimResults=true；
this.recognition.addEventListener（“结果”，（事件）=>{
控制台日志（“结果”）；
const text=Array.from（event.results）
.map（（结果）=>结果[0]）
.map（（结果）=>result.transcript）
.加入（“”）；
this.runtimeTranscription=text；
});
this.recognition.addEventListener（“end”，（）=>{
控制台日志（“结束”）；
if（this.runtimeTranscription！==“”）{
this.translation.push（this.runtimetranslation）；
此.$emit（“onTranscriptionEnd”{
转录：这个，转录，
最后一句话：this.runtimeTranscription，
});
}否则{
console.log（“未找到任何内容”）；
}
this.runtimetranslation=“”；
});
this.recognition.onresult=函数（事件）{
var color=event.results[0][0]。转录本；
控制台。日志（颜色）；
};
},
},
安装的（）{
this.checkApi（）；
},
};

Sandbox的链接=

但每次我在textarea上使用/键入内容时，语音推送/发送文本时都会出现错误。

---

比如：我说了一些话，然后在文本区键入了一些话，然后当我再次尝试说一些话时，我发现了错误。

分享由于错误而产生的错误。