speech recognition onresult called twice on mobile and tablet deveices

Question

I am trying to create a speech recognition enabled web application. I have successfully implemented the same and its working as expected on the desktop. But On mobile and tablet devices the onResult called twice and the second result is what i expected not the first. But because of this I couldn't get the result as I expected. Is anyone facing the same issue let me know.

Answer 1

I hope I have understood your issue, and by my understanding you seem to be having an issue with extracting web-speech recognition results correctly on mobile devices.

The native speech recognition, most notably, chrome/android browsers on Android, handle speech recognition results slightly differently from their desktop versions. Recognition results where isFinal is true, are usually complete sentences, recognized by the mobile browsers, where as, for example, on desktop chrome, even words are returned with isFinal==true.

Here's a simplified version of what worked best for me.

var mobile=false;
if(/*Use preferred method to detect mobile device*/){
   mobile=true;
}
Recognizer.onresult = function(event){
  var interimTranscripts = '';
  var finalTranscripts = '';
  for(var i = event.resultIndex; i < event.results.length; i++){
    var transcript = event.results[i][0].transcript;
    if(event.results[i].isFinal){
      if(mobile){  //if running on a mobile device
        finalTranscripts = transcript;
      }else{
        finalTranscripts += transcript;
      }
    }else{
      if(mobile){  //if running on a mobile device
        interimTranscripts = transcript;
      }else{
        interimTranscripts += transcript;
      }
    }
  }
  if(finalTranscripts){
    target.value = finalTranscripts; //the output
    if(!mobile){
      Recognition.stop();
    }
  }
  else if(interimTranscripts){
    target.value = interimTranscripts + finalTranscripts;
  }
};