Speech recognition stops in Ionic capacitor-community/speech-recognition

Question

I am currently working on an Ionic project and using the capacitor-community/speech-recognition plugin for implementing speech recognition. I am facing challenges in determining when the speech recognition stops.

Below is my current code snippet

async speechRecognition() {
if (!this.isPermissionAvailable) {
    SpeechRecognition.requestPermissions();
    await this.checkPermission();
  }

  if (!this.isMicrophoneDisabled) {
    try {
      await SpeechRecognition.start({
        language: "en-US",
        partialResults: true,
        popup: false,
        maxResults: 0,
      });

      SpeechRecognition.addListener("partialResults", (data: any) => {
        this.annotationValue = data.matches;
        console.log("partialResults was fired", data.matches);
        console.log('present data', data);
        this.chg.detectChanges();
      });
    } catch (error) {
      console.log(error);

      // Stop speech recognition on error
      await SpeechRecognition.stop();

      // Update state variables
      this.isMicrophoneDisabled = !this.isMicrophoneDisabled;
      this.showAnimation = !this.showAnimation;
    }
  } else {
    this.showAnimation = false;
  }
}

I tried if i get any error in catch block but didn't work I expect to be able to detect when the speech recognition listening has stopped so that I can perform additional actions in my Ionic application.

Answer 1

I do wish there was an ability to add a timer, but luckily with code we can at least get a semi-handle on this.

What i've done personally is separated my addlistener (it will always be listening no matter when we add it, the listener isn't the problem) from my SpeechRecognition.start();

In this case, if the addListener has data.matches that come through from listening to me speak, the length will be greater than 0. So, I then, trigger my SpeechRecognition.start() again, and pick up the various things i've said and concatenate them together in a sentence.

If no data.matches come through then the SpeechRecognition will automatically end within a matter of second(s) (meaning the person isn't speaking).

It's the only workaround i've seen so far, and i'll look at the SpeechRecognition app to see if there's any way to improve it, if possible.

// You will likely add this to your constructor/onInit()
SpeechRecognition.addListener("partialResults", (data: any) => {
  this.annotationValue = data.matches;
  console.log("partialResults was fired", data.matches);
  console.log('present data', data);
  this.speechRecognition();
  this.chg.detectChanges();
  // The SpeechRecognition content should be handled in a Service.
  // If you set that up, you can call detectChanges() in your callback.
});

async speechRecognition() {
  if (!this.isPermissionAvailable) {
    SpeechRecognition.requestPermissions();
    await this.checkPermission();
  }

  if (!this.isMicrophoneDisabled) {
    try {
      await SpeechRecognition.start({
        language: "en-US",
        partialResults: true,
        popup: false,
        maxResults: 0,
      });
    } catch (error) {
      console.log(error);

      // Stop speech recognition on error
      await SpeechRecognition.stop();

      // Update state variables
      this.isMicrophoneDisabled = !this.isMicrophoneDisabled;
      this.showAnimation = !this.showAnimation;
    }
  } else {
    this.showAnimation = false;
  }
}

Needless to say, this is not a perfect approach, but for the time being, it will allow you to record increased content.