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

Question

我能找到的最好的是这个演示，但对我来说不是很清楚。

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

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

Answer 1

我找到了一个更简单的实现，就是这样：<template>&nbsp; <div class="voice">&nbsp; &nbsp; <div class="speech-to-txt" @click="startSpeechToTxt">Speech to txt</div>&nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; <p>{{transcription_}}</p></div></template>&nbsp;<script>&nbsp; export default {&nbsp; &nbsp;name: 'speech_to_text',&nbsp; &nbsp;data() {&nbsp; &nbsp; &nbsp;return {&nbsp; &nbsp; &nbsp; &nbsp;runtimeTranscription_: "",&nbsp; &nbsp; &nbsp; &nbsp;transcription_: [],&nbsp; &nbsp; &nbsp; &nbsp;lang_: "es-ES"&nbsp; &nbsp; &nbsp;};&nbsp; &nbsp;},&nbsp; &nbsp;methods: {&nbsp; &nbsp; startSpeechToTxt() {&nbsp; &nbsp; // initialisation of voicereco&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; window.SpeechRecognition =&nbsp; &nbsp; window.SpeechRecognition ||&nbsp;&nbsp; &nbsp; window.webkitSpeechRecognition;&nbsp; &nbsp; const recognition = new window.SpeechRecognition();&nbsp; &nbsp; recognition.lang = this.lang_;&nbsp; &nbsp; recognition.interimResults = true;&nbsp; &nbsp; // event current voice reco word&nbsp; &nbsp; recognition.addEventListener("result", event => {&nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; var text = Array.from(event.results)&nbsp; &nbsp; &nbsp; &nbsp; .map(result => result[0])&nbsp; &nbsp; &nbsp; &nbsp; .map(result => result.transcript)&nbsp; &nbsp; &nbsp; &nbsp; .join("");&nbsp; &nbsp; &nbsp; this.runtimeTranscription_ = text;&nbsp; &nbsp; });&nbsp; &nbsp; // end of transcription&nbsp; &nbsp; recognition.addEventListener("end", () => {&nbsp; &nbsp; &nbsp; this.transcription_.push(this.runtimeTranscription_);&nbsp; &nbsp; &nbsp; this.runtimeTranscription_ = "";&nbsp; &nbsp; &nbsp; recognition.stop();&nbsp; &nbsp; });&nbsp; &nbsp; &nbsp;recognition.start();&nbsp; &nbsp;},&nbsp; &nbsp;}&nbsp; }&nbsp; </script>