cympfh/web.listening.you.html

## web.listening.you.html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Speech-to-Text</title>
  <script>

    function echo(text) {
      var style = 'color: #884488; font-weight: bold; font-size: 20px; \
      text-shadow: #dddddd 2px 0px,  #dddddd -2px 0px, #dddddd 0px -2px, \
      #dddddd 0px 2px, #dddddd 2px 2px, #dddddd -2px 2px, #dddddd 2px -2px, \
      #dddddd -2px -2px, #dddddd 1px 2px,  #dddddd -1px 2px, #dddddd 1px -2px, \
      #dddddd -1px -2px, #dddddd 2px 1px,  #dddddd -2px 1px, #dddddd 2px -1px, \
      #dddddd -2px -1px;';
      console.log('%c%s', style, text);
    }

    var SpeechRecognition = webkitSpeechRecognition || SpeechRecognition;
    var recognition = new SpeechRecognition();
    recognition.lang = 'ja-JP'; // 'en-US'
    recognition.interimResults = true;
    recognition.continuous = true;

    recognition.onsoundstart = () => {
      console.log('[I] Listening...')
    };

    recognition.onnomatch = () => {
      console.log('[I] NoMatch (try again)');
    };

    recognition.onerror = () => {
      console.log('[I] Error');
    };

    recognition.onsoundend = () => {
      console.log('[I] End');
    };

    recognition.onresult = (event) => {
      for (var i = event.resultIndex; i < event.results.length; i++){
        if (event.results[i].isFinal){
          echo(event.results[i][0].transcript);
        } else{
          console.log('[I] Interim:', event.results[i][0].transcript);
        }
      }
    }
    recognition.start();
  </script>
</head>
<body>
  <span id="transcript"></span>
</body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>Speech-to-Text</title>
	<script>

	function echo(text) {
	var style = 'color: #884488; font-weight: bold; font-size: 20px; \
	text-shadow: #dddddd 2px 0px, #dddddd -2px 0px, #dddddd 0px -2px, \
	#dddddd 0px 2px, #dddddd 2px 2px, #dddddd -2px 2px, #dddddd 2px -2px, \
	#dddddd -2px -2px, #dddddd 1px 2px, #dddddd -1px 2px, #dddddd 1px -2px, \
	#dddddd -1px -2px, #dddddd 2px 1px, #dddddd -2px 1px, #dddddd 2px -1px, \
	#dddddd -2px -1px;';
	console.log('%c%s', style, text);
	}

	var SpeechRecognition = webkitSpeechRecognition \|\| SpeechRecognition;
	var recognition = new SpeechRecognition();
	recognition.lang = 'ja-JP'; // 'en-US'
	recognition.interimResults = true;
	recognition.continuous = true;

	recognition.onsoundstart = () => {
	console.log('[I] Listening...')
	};

	recognition.onnomatch = () => {
	console.log('[I] NoMatch (try again)');
	};

	recognition.onerror = () => {
	console.log('[I] Error');
	};

	recognition.onsoundend = () => {
	console.log('[I] End');
	};

	recognition.onresult = (event) => {
	for (var i = event.resultIndex; i < event.results.length; i++){
	if (event.results[i].isFinal){
	echo(event.results[i][0].transcript);
	} else{
	console.log('[I] Interim:', event.results[i][0].transcript);
	}
	}
	}
	recognition.start();
	</script>
	</head>
	<body>
	<span id="transcript"></span>
	</body>
	</html>