Speech Recognition - Question V2

Speech Recognition - Question V2

by Alexandru Mihai

HTML

<div class="container">
  <div id="message" class="message">Click "Talk" and begin speaking.</div>
  <div class="todo"> <span id="final_span" class="final"></span>
    <span id="interim_span" class="interim"></span>
  </div>
  <div class="controls">
    <button id="talk_button" type="button" class="btn btn-default" onclick="talkWithApp(event)">Talk</button>
    
  </div>
  
  
    <div class="response"></div>
  
</div>

CSS

.container {
    width:98%;
    margin:auto;
    max-width:680px;
}

.message {
    color:#999;
    padding: 1em 0;
}
.todo, .response {
    min-height:6em;
    background-color: #fff;
    margin-bottom: 0.5em;
    padding: 1em;
    color:#555;
    -webkit-box-shadow: 0 0px 3px #BDBDBD;
    box-shadow: 0 0px 3px #BDBDBD;
    transition: all 0.3s ease-in-out;
}
.response {
  margin-top: 30px;
  min-height: 100px
}
.controls {
    text-align:center;
}
.select {
    border: 1px solid #999;
}

.final {
    color: #999;
}

.interim {
    color: #CCC;
}

JavaScript

var final_transcript = '';
var recognizing = false;
var ignore_onend;
var start_timestamp;


// Speech Recognition
if (!('webkitSpeechRecognition' in window)) {
  message.innerHTML = 'Web Speech API is not supported by this browser. Upgrade to <a href="//www.google.com/chrome">Chrome</a> version 25 or later.';
} else {
  var recognition = new webkitSpeechRecognition();
  recognition.continuous = true;
  recognition.interimResults = true;

  recognition.onstart = function() {
    recognizing = true;
    message.innerHTML = 'Speak now.';
    talk_button.innerHTML = 'Listen';
  };

  recognition.onresult = function(event) {
    var interim_transcript = '';
    for (var i = event.resultIndex; i < event.results.length; ++i) {
      if (event.results[i].isFinal) {
        final_transcript += event.results[i][0].transcript;
        vc_search(final_transcript);
      } else {
        interim_transcript += event.results[i][0].transcript;
      }
    }
    final_span.innerHTML = final_transcript;
    interim_span.innerHTML = interim_transcript;
  };

  recognition.onend = function() {

    recognizing = false;
    if (ignore_onend) {
      return;
    }
    
    if (!final_transcript) {
      message.innerHTML = 'Click "Talk" and begin speaking.';
      talk_button.innerHTML = 'Talk';
      return;
    }
  };

  recognition.onerror = function(event) {
    if (event.error == 'no-speech') {
      message.innerHTML = 'No speech was detected.';
      ignore_onend = true;
    }
    if (event.error == 'audio-capture') {
      message.innerHTML = 'No microphone was found. Ensure that a microphone is installed.';
      ignore_onend = true;
    }
    if (event.error == 'not-allowed') {
      if (event.timeStamp - start_timestamp < 100) {
        message.innerHTML = 'Permission to use microphone is blocked. To change, go to chrome://settings/contentExceptions#media-stream';
      } else {
        message.innerHTML = 'Permission to use microphone was denied.';
      }
     ...