下記のサンプルコードで、音声認識および停止のプログラムを作っていますが、音声認識の停止ができません。認識プログララムを、関数から呼び出す必要があり、引数によって、認識と停止を使い分けています。一度認識を呼び出すと、停止ができずに、認識を継続しておこなっているようです。強制的にでも、認識をストップし、停止を行うには、どうすればよろしいでしょうか?
■できること:音声の認識開始および、認識はできる。
■できないこと:音声の認識停止ができない。
(一度、recognition.start()を行っており、それを、永遠に関数で呼び出している為、どうも、recognition.stopを行っても、それが効いていないようです。)
■実行環境 https で動かしています。
■サンプルコード
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>test</title>
<script>
var flag_speech = 0;
var ketugou_part= "";
function vr_function(hantei) {
window.SpeechRecognition = window.SpeechRecognition || webkitSpeechRecognition;
var recognition = new webkitSpeechRecognition();
recognition.lang = 'ja';
recognition.interimResults = true;
recognition.continuous = true;
recognition.onsoundstart = function() {
document.getElementById('status').innerHTML = "認識中共通";
};
recognition.onnomatch = function() {
document.getElementById('status').innerHTML = "もう一度試してください共通";
};
if(hantei==1){
recognition.onerror = function() {
document.getElementById('status').innerHTML = "エラー1";
if(flag_speech == 0)
vr_function(1);
};
recognition.onsoundend = function() {
document.getElementById('status').innerHTML = "停止中1";
vr_function(1);
};
flag_speech = 0;
document.getElementById('status').innerHTML = "start1";
recognition.start();
}
else if(hantei==0){
document.getElementById('status').innerHTML = "ストップ";
recognition.stop();
}
recognition.onresult = function(event) {
var results = event.results;
for (var i = event.resultIndex; i < results.length; i++) {
if (results[i].isFinal)
{
document.getElementById('result_text').innerHTML = results[i][0].transcript;
document.forms['form2'].elements['text'].value= results[i][0].transcript ;
vr_function(1);
}
else
{
document.getElementById('result_text').innerHTML = "[途中経過] " + results[i][0].transcript;
flag_speech = 1;
}
}
}
}
</script>
</head>
<body>
<input type="button" onClick="vr_function(1);" value="音声認識開始"><br>
<input type="button" onClick="vr_function(0);" value="音声認識を停止"><br>
■状態<br><textarea id="status" cols="100" rows="1"></textarea><br>
■認識された文字<br>
<textarea id="result_text" cols="100" rows="10">
</textarea>
<form name="form2"><input type="hidden" name="text" value=""></form>
<br>
</body>
</html>