如何以简单的方式在 vuejs 中实现 webkitSpeechRecognition？答案

【问题标题】：How can I implement webkitSpeechRecognition in vuejs in a simple way?如何以简单的方式在 vuejs 中实现 webkitSpeechRecognition？
【发布时间】：2020-08-06 16:36:45
【问题描述】：

我能找到的最好的是this demo，但对我来说不是很清楚。

你能分享一个非常简单的实现吗？

<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="The text"
            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">
          {{sentences}}
        </v-flex>
      </v-layout>
    </v-container>
  </v-app>
</div>

【问题讨论】：

链接演示中哪些代码你看不懂？
嘿@Sphinx，它的构建方式，我无法复制它。我添加了一段更简单的代码，我认为这对其他人也有帮助。

标签： javascript vue.js speech-recognition webkitspeechrecognition

【解决方案1】：

我找到了一个更简单的implementation，就是这样：

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



 <script>

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

    // event current voice reco 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>

【讨论】：