如何停止语音录制的语音识别

Question

我正在使用JavaScript和vue创建一个简单的SpeechRecognition。

它正在运行，但是我想在单击按钮时停止录制。

我已经尝试使用.stop或.abort，但是它不起作用。

我的模板

<a v-show='StatusSpeech' href="javascript:;" v-on:click="Speech($event, DataJournals.id, index, StatusSpeech)" class="btn btn-sm btn-primary">Speech</a>
<a v-show='!StatusSpeech' href="javascript:;" v-on:click="Speech($event, DataJournals.id, index, StatusSpeech)" class="btn btn-sm btn-danger">Stop</a>

我的变量

export default {
 data() {
  return {
   StatusSpeech: true,
  }
 }

这是我的代码：

Speech: function (event, id, index, StatusSpeech) {

  window.SpeechRecognition = window.webkitSpeechRecognition || window.SpeechRecognition;
  let finalTranscript = '';
  let recognition = new window.SpeechRecognition();
  recognition.lang = 'en-US';
  recognition.interimResults = true;
  recognition.maxAlternatives = 10;
  recognition.continuous = true;
  recognition.onresult = (event) => {
    let interimTranscript = '';
    for (let i = event.resultIndex, len = event.results.length; i < len; i++) {
      let transcript = event.results[i][0].transcript;
      if (event.results[i].isFinal) {
        finalTranscript += transcript;
      } else {
        interimTranscript += transcript;
      }
    }
    console.log(finalTranscript)
    console.log(interimTranscript)

    this.DataJournal[index].Description = finalTranscript + interimTranscript;
  }

  if (StatusSpeech) {
    recognition.start();
    console.log('Speech recognition started')
    this.StatusSpeech = false
  }else{
    recognition.abort();
    console.log('Speech recognition stoped')
    this.StatusSpeech = true
  }
}