How to get both interim Transcript and final transcript in webkitSpeechRecognition

Question

I am developing a JavaScript app that uses webkitSpeechRecognition. In my code and what's a must i have set interimResult as true so as a user can see when the app is finding a match for the spoken words but i myself want to use the final results for something else and both should be displayed. I have tried several ways to do this but it didn't work, including calling two functions when button is clicked but this makes only one function to work.Here is my algorithm:

<script type="text/javascript">

var r = document.getElementById('result');
var btn = document.getElementById('btn');

btn.addEventListener('click', startConverting);

function startConverting() {
if ('webkitSpeechRecognition' in window) {
var speechRecognizer = new webkitSpeechRecognition();
speechRecognizer.continuous = true;
speechRecognizer.interimResults = true;
speechRecognizer.lang = "en-GB";
speechRecognizer.start();

var finalTranscripts = '';

speechRecognizer.onresult = function(event) {
  if (event.results.length) {
    r.innerHTML = event.results[0][0].transcript;

    var question = event.results[0][0].transcript;
  }
};

speechRecognizer.onerror = function(event) {

};
} else {
r.innerHTML = 'Your browser is not supported.If Google chrome,please upgrade!';
}
}

I have not included the part i call two different functions when button is clicked, this is just the original code for converting with interimResults true. Any help will be appreciated. Thanks

Answer 1

You can use isFinal property to separate interim and final transcripts:

for (var i = event.resultIndex; i < event.results.length; ++i) {
  if (event.results[i].isFinal) {
    final_transcript += event.results[i][0].transcript;
  } else {
    interim_transcript += event.results[i][0].transcript;
  }
}

see docs for details.