Как я могу остановить SpeechRecognition от записи звука

Question

Я создаю простой SpeechRecognition с JavaScript и vue.

Это работает, но я хочу остановить запись, когда нажимаю кнопку.

Я уже пробовал использовать.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
  }
}