JSFiddle - React, Tailwind, and code Playground

by adamschwartz

HTML

<input type="text" placeholder="" speech x-webkit-speech />

<button onclick="startButton(event)"></button>

CSS

input {
    border: 0px;
    background: transparent;
    width: 100px;
    height: 100px;
    outline: none;
    cursor: pointer;
    display: none;
}

button {
    -webkit-appearance: none;
    background: #fff;
    border: 1px solid #444;
    border-radius: 50%;
    width: 100px;
    height: 100px;
    border: 0px;
    background: #eee;
    position: absolute;
    left: 50%;
    margin-left: -50px;
    top: 50%;
    margin-top: -50px;
    box-shadow: 0 1px #ccc, 0 2px #ccc;
}

button:active {
    box-shadow: inset 0px 2px 5px rgba(0, 0, 0, 0.4);
}

JavaScript

var ignore_onend, recognizing, final_transcript, interim_transcript;

function startButton(event) {
  if (recognizing) {
    recognition.stop();
    return;
  }
   interim_transcript= final_transcript = '';
  recognition.lang = 6; //english
  recognition.start();
}


if (!('webkitSpeechRecognition' in window)) {
    console.log('Sorry, you\'re computer does not support Speech recognition');
} else {
    var recognition = new webkitSpeechRecognition();
    recognition.continuous = true;
    recognition.interimResults = true;
    recognition.onstart = function() {
        recognizing = true;
        ignore_onend = false;
        console.log('Listening...');
    };

    recognition.onerror = function(event) {
        if (event.error == 'no-speech') {
            console.log('Speech error. Not listening...');
            ignore_onend = true;
        }
        if (event.error == 'audio-capture') {
            console.log('You got no microphone...');
            ignore_onend = true;
        }
        if (event.error == 'not-allowed') {
            if (event.timeStamp - start_timestamp < 100) {
                 console.log('Blocked');
            } else {
                 console.log('Denied');
            }
            ignore_onend = true;
        }
    };

    recognition.onend = function() {
        recognizing = false;
        if (ignore_onend) {
            return;
        }
        console.log('Done listening...');
        
    };

    recognition.onresult = function(event) {
        var interim_transcript = '';
        if (typeof(event.results) == 'undefined') {
            recognition.onend = null;
            recognition.stop();
            console.log('Sorry, no transcript');
            return;
        }
    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;
      }
    }
 ...