下記のサンプルコードで、音声認識および停止のプログラムを作っていますが、音声認識の停止ができません。認識プログララムを、関数から呼び出す必要があり、引数によって、認識と停止を使い分けています。一度認識を呼び出すと、停止ができずに、認識を継続しておこなっているようです。強制的にでも、認識をストップし、停止を行うには、どうすればよろしいでしょうか？

■できること：音声の認識開始および、認識はできる。
■できないこと：音声の認識停止ができない。
（一度、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 = "エラー１";
            if(flag_speech == 0)
                vr_function(1);
        };
        recognition.onsoundend = function() {
            document.getElementById('status').innerHTML = "停止中１";
            vr_function(1);
        };

        flag_speech = 0;
        document.getElementById('status').innerHTML = "start１";
        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>