JSFiddle - React, Tailwind, and code Playground

by Conor Byrne

HTML

<div class="container">
          <h1>Speech Bot ptoyotype</h1>
          <h2>Transcription</h2>
          <textarea id="final_span" readonly="readonly"></textarea>
          <textarea id="interim_span" readonly="readonly"></textarea>

          <div class="buttons-wrapper">
            <button id="startSpeech" class="button-demo">Play demo</button>
            <button id="stopRecognizing"  class="button-demo" type="button" name="button">Stop</button>
          </div>
    </div>

CSS

.container {
  margin: auto;
  width: 100%;
  max-width: 1024px; }

JavaScript

var recognition = new webkitSpeechRecognition(); // google voice recognition start

 recognition.continuous = true; //so that recognition will continue even if the user pauses while speaking
//
 document.getElementById('startSpeech').addEventListener('click', function() {
     startSpeech();
});
document.getElementById('stopRecognizing').addEventListener('click', function() {
    stopRecognizing();
});

 var startSpeech = function(){

    var lang = ['en-GB', 'United Kingdom'];
    final_transcript = '';
       recognition.lang =  recognition.lang
       recognition.start() //activates the speech recognizer
 }

var stopRecognizing = function(){
    recognition.stop();//stops the mic from listening
    return;
}

 recognition.onresult = function(event) {
     console.log('event', event);
     // This handler concatenates all
     // the results received so far into two strings  final_transcript & interim_transcript

    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;
      } else {
        interim_transcript += event.results[i][0].transcript;
      }
    }
    //final_transcript = capitalize(final_transcript);
        final_span.innerHTML = linebreak(final_transcript);
        interim_span.innerHTML = linebreak(interim_transcript);
				
        if (final_transcript.length > 0) {
            matchingKeyWords(final_transcript);
        }
    };

    function linebreak(s) {
        var two_line = /\n\n/g;
        var one_line = /\n/g;
        return s.replace(two_line, '<p></p>').replace(one_line, '<br>');
    }

    function capitalize(s) {
        var first_char = /\S/;
        return s.replace(first_char, function(m) { return m.toUpperCase(); });
    }



    var matchingKeyWords = function(conversation){

        var keyWords = ['power', 'tie', 'imaginary' ,'bomb', 'drink', 'underwear', 'chance', 'type',...