microfone

by andersb79

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 id="result"></div>
  
  </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;
var language = 'sv';
var storyText = 'Nu ska jag berätta en historia om en liten pojke';
var story = storyText.split(' ');
var res = [];

//get languages
// https://gist.githubusercontent.com/onigetoc/d5dc63320c4d08633eb7b7daf6c1ddeb/raw/e9c3da4a40db8edf4992db9219526617da811c4c/lang.json
$.get("//raw.githubusercontent.com/the-creature/language-json/master/data.json", function(data) {
});

// 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 {
      if(story.length == 0) return;
      var wordToFind = story[0].toLowerCase().trim();
    var recognizedWord = event.results[i][0].transcript.toLowerCase().trim();
    console.log('word to find:' + wordToFind);
    console.log('found:' + recognizedWord);
    var isMatch = wordToFind === recognizedWord;
     console.log(isMatch);
      if(isMatch) {
     		console.log('RÄTT');
     		if(story.length > 0)
        {
        story.shift();
        result.innerHTML = story.join(' ');
        }
    		} else {    
    		
     
    	} 
    result.innerHMTL = res.join();
      	console.log(event.results[i][0].transcript);
        interim_transcript += event.results[i][0].transcript;
      }
    }
   ...