kzkamiya/index.html

## index.html
<!DOCTYPE html>
<html>
<!--
https://bl.ocks.org/kzkamiya/raw/c84e8ec99fdc416b72e9/
https://www.google.com/intl/en/chrome/demos/speech.html
-->
<head>
<meta chraset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<style>

.flex-container  {
  padding: 0;
  margin: 0;
  list-style: none;

  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;

  flex-flow: row wrap;
  -webkit-flex-flow: row wrap;

  justify-content: space-around;
  -webkit-justify-content: space-around;

}

.flex-item  {
  background: tomato;
  padding: 5px;
  width: 800px;
  height: auto;
  margin-top: 10px;

  line-height: 1.1em;
  color: white;
  font-weight: bold;
  font-size: 1em;
  text-align: center;
}

</style>
</head>
<body>

<article>
<hgroup>
<h1>webkitSpeechRecognition</h1>
<h2>HTML5+CSS3</h2>
</hgroup>
<p>Test of webkitSpeechRecognition.</p>
<input type="button" value="音声認識開始" onclick="start();"/>
<input type="button" value="音声認識終了" onclick="stop();"/>
<div id="status">---</div>
<section>
    <h1>Results.</h1>
    <ul id="flex-container" class="flex-container">
    </ul>
</section>
</article>

<script>

    var ul = document.getElementById('flex-container');
    function addMessage(msg) {
          var li = document.createElement('li');
          li.className = "flex-item";
          content = document.createTextNode(msg);
          li.appendChild(content);
          ul.appendChild(li);
    };

    var recognition = new webkitSpeechRecognition();
    recognition.lang = "ja-JP";
    recognition.maxAlternatives = 5;
    recognition.continuous = true;
    recognition.interimResults = true;

    function stop(){
      document.getElementById('status').innerHTML = "停止";
      recognition.stop();
    }

    function start(){
      document.getElementById('status').innerHTML = "開始";
      recognition.start();
    };

    //話し声の認識中
    recognition.onsoundstart = function(){
        document.getElementById('status').innerHTML = "認識中";
    };
    //マッチする認識が無い
    recognition.onnomatch = function(){
        document.getElementById('status').innerHTML = "もう一度試してください";
    };
    //エラー
    recognition.onerror= function(){
        document.getElementById('status').innerHTML = "エラー";
    };
    //話し声の認識終了
    recognition.onsoundend = function(){
        document.getElementById('status').innerHTML = "停止中";
    };
    recognition.onend = function(){
        document.getElementById('status').innerHTML = "再起動";
        recognition.start();
    };

    //認識が終了したときのイベント
    recognition.onresult = function(event){
        var results = event.results;
        for (var i = event.resultIndex; i<results.length; i++){
          var text = results[i][0].transcript;
          if(results[i].isFinal) {
            addMessage(text);
            document.getElementById('status').innerHTML = '---';
          } else {
            document.getElementById('status').innerHTML = text;
          }
        }
    };

    window.addEventListener('load', start, false);
</script>

</body>
</html>
	<!DOCTYPE html>
	<html>
	<!--
	https://bl.ocks.org/kzkamiya/raw/c84e8ec99fdc416b72e9/
	https://www.google.com/intl/en/chrome/demos/speech.html
	-->
	<head>
	<meta chraset="UTF-8">
	<meta name="viewport" content="width=device-width,initial-scale=1.0">
	<style>

	.flex-container {
	padding: 0;
	margin: 0;
	list-style: none;

	display: -webkit-box;
	display: -moz-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;

	flex-flow: row wrap;
	-webkit-flex-flow: row wrap;

	justify-content: space-around;
	-webkit-justify-content: space-around;

	}

	.flex-item {
	background: tomato;
	padding: 5px;
	width: 800px;
	height: auto;
	margin-top: 10px;

	line-height: 1.1em;
	color: white;
	font-weight: bold;
	font-size: 1em;
	text-align: center;
	}

	</style>
	</head>
	<body>

	<article>
	<hgroup>
	<h1>webkitSpeechRecognition</h1>
	<h2>HTML5+CSS3</h2>
	</hgroup>
	<p>Test of webkitSpeechRecognition.</p>
	<input type="button" value="音声認識開始" onclick="start();"/>
	<input type="button" value="音声認識終了" onclick="stop();"/>
	<div id="status">---</div>
	<section>
	<h1>Results.</h1>
	<ul id="flex-container" class="flex-container">
	</ul>
	</section>
	</article>

	<script>

	var ul = document.getElementById('flex-container');
	function addMessage(msg) {
	var li = document.createElement('li');
	li.className = "flex-item";
	content = document.createTextNode(msg);
	li.appendChild(content);
	ul.appendChild(li);
	};

	var recognition = new webkitSpeechRecognition();
	recognition.lang = "ja-JP";
	recognition.maxAlternatives = 5;
	recognition.continuous = true;
	recognition.interimResults = true;

	function stop(){
	document.getElementById('status').innerHTML = "停止";
	recognition.stop();
	}

	function start(){
	document.getElementById('status').innerHTML = "開始";
	recognition.start();
	};

	//話し声の認識中
	recognition.onsoundstart = function(){
	document.getElementById('status').innerHTML = "認識中";
	};
	//マッチする認識が無い
	recognition.onnomatch = function(){
	document.getElementById('status').innerHTML = "もう一度試してください";
	};
	//エラー
	recognition.onerror= function(){
	document.getElementById('status').innerHTML = "エラー";
	};
	//話し声の認識終了
	recognition.onsoundend = function(){
	document.getElementById('status').innerHTML = "停止中";
	};
	recognition.onend = function(){
	document.getElementById('status').innerHTML = "再起動";
	recognition.start();
	};

	//認識が終了したときのイベント
	recognition.onresult = function(event){
	var results = event.results;
	for (var i = event.resultIndex; i<results.length; i++){
	var text = results[i][0].transcript;
	if(results[i].isFinal) {
	addMessage(text);
	document.getElementById('status').innerHTML = '---';
	} else {
	document.getElementById('status').innerHTML = text;
	}
	}
	};

	window.addEventListener('load', start, false);
	</script>

	</body>
	</html>