You should mark the recognition service as continuous and maybe start the recorder again if it stops after the timeout when there is no activity.

 <button onclick='toggleRecording()'>Toggle recorder</button>
 <div id='results'></div>
 <script>
    window.SpeechRecognition = window.SpeechRecognition ||
    window.webkitSpeechRecognition;

    let recognition = new window.SpeechRecognition()
    let recording = false;
    let results = null;

    recognition.continuous = true;

    function toggleRecording() {
        if(recording) {
            recognition.onend = null;
            recognition.stop();
            recording = false;

            // Printing all results we got so far.
            if(results) {
                let resultsDiv = document.getElementById('results')
                for(let i=0; i<results.length; ++i)
                    resultsDiv.innerHTML = resultsDiv.innerHTML + results.item(i)[0].transcript
            }
        } else {
            recognition.onend = onEnd;
            recognition.start();
            recording = true;
        }
    }

    function onEnd() {
        console.log('Speech recognition has stopped. Starting again ...');
        recognition.start();
    }


    function onSpeak(e) {
        results = e.results;
        console.log(e.results[e.results.length-1][0].transcript);
    }

    recognition.addEventListener('result', onSpeak);

</script>