Issue To Modify Web Speech API?

Question

Thanks to Matthew Terentjev's great job Here we can do Speech Recognition Online using javascript in Articulate Storyline. The code below is triggered via a button. it is simple and clean and that's what confuses me more, I tried to do some modifications and two of them make me feel like I'm a big failure in life :(

1) First one is even if you add this code :

recognition.continuous = true;

...Recognition does not continue when the user pauses while speaking. even when I change this part to :

recognition.onspeechend = function() {
recognition.start(); // I changed this line from recognition.stop(); 
console.log('Speech ended!');
}

2) Next thing I tried unsuccessfully was this: each time user clicks to start a new recognition, the last recognized text should disappear, (Not when the user starts speaking but when he/she clicks the button). in last 24 hours, I was trying to find a solution for this with no success.

There is a button in Storyline project that triggers the code. and a variable that is attached to a text box that is responsible to show the result for user named SpeechReceived.

Here is the code :

  var SpeechRecognition = SpeechRecognition || webkitSpeechRecognition;
  var SpeechGrammarList = SpeechGrammarList || webkitSpeechGrammarList;
  var SpeechRecognitionEvent = SpeechRecognitionEvent || webkitSpeechRecognitionEvent;

  var recognition = new SpeechRecognition();
  var speechRecognitionList = new SpeechGrammarList();
  recognition.grammars = speechRecognitionList;
  recognition.lang = 'en-GB';
  recognition.interimResults = false;
  recognition.maxAlternatives = 1;

  recognition.start();

  recognition.onresult = function(event) {

    var speechResult = event.results[0][0].transcript;
 //return speech and change storyline variable with a result
    var player = GetPlayer();
    player.SetVar("SpeechReceived",speechResult);  
    console.log('Confidence: ' + event.results[0][0].confidence);
  }

  recognition.onspeechend = function() {
    recognition.stop();
    console.log('Speech ended!');
  }

  recognition.onerror = function(event) {
 console.log('Error occurred in recognition: ' + event.error);
  }

  recognition.onaudiostart = function(event) {
      //Fired when the user agent has started to capture audio.
      console.log('SpeechRecognition.onaudiostart');
  }

  recognition.onaudioend = function(event) {
      //Fired when the user agent has finished capturing audio.
      console.log('SpeechRecognition.onaudioend');
  }

  recognition.onend = function(event) {
      //Fired when the speech recognition service has disconnected.
      console.log('SpeechRecognition.onend');
  }

  recognition.onnomatch = function(event) {
      //Fired when the speech recognition can't recognise speech
      console.log('SpeechRecognition.onnomatch');
  }

  recognition.onsoundstart = function(event) {
      //Fired when any sound — recognisable speech or not — has been detected.
      console.log('SpeechRecognition.onsoundstart');
  }

  recognition.onsoundend = function(event) {
      //Fired when no sound present
      console.log('SpeechRecognition.onsoundend');
  }

  recognition.onspeechstart = function (event) {
      //Fired when speech starts
      console.log('SpeechRecognition.onspeechstart');
  }
  recognition.onstart = function(event) {
      //Fired when the speech recognition service has begun listening
      console.log('SpeechRecognition.onstart');
  }

Answer 1

In the first code sample, you might want to not use recognition.stop() . And listen for result instead of speechend . You can stitch together the results to get the entire thing.

Answer 2

For your first question, instead of using onspeechend use onend to continue listening

recognition.onend = function(event) {
  recognition.start();
  console.log('SpeechRecognition.onend');
}

This will make the microphone continuously listen.

As for the second question, I don't know. Hope this helps with the first issue at least!