JSFiddle - React, Tailwind, and code Playground

by Yoshiharu Kamata

HTML

<button id="recBtn">音声認識開始</button>
<button id="stop">停止</button>
<div id="result"></div>

JavaScript

$(function () {
    var recognition = new webkitSpeechRecognition();
    recognition.continuous = true;
    recognition.interimResults = true;
    recognition.lang = "ja_JP";
    recognition.onresult = function (event) {
        /*
        for (var i = event.resultIndex; i < event.results.length; ++i) {
            $("#result").text(event.results[i][0].transcript);
        }
        */
        var interim_transcript = '',
            final_transcript = '';
        if (typeof (event.results) == 'undefined') {
            recognition.onend = null;
            recognition.stop();
            upgrade();
            return;
        }
        for (var i = event.resultIndex; i < event.results.length; ++i) {
            if (event.results[i].isFinal) {
                final_transcript += event.results[i][0].transcript;
            } else {
                interim_transcript += event.results[i][0].transcript;
            }
        }
        console.log("inter=",interim_transcript);
        console.log("final=",final_transcript);
        $("#result").text(final_transcript);


    };

    $("#recBtn").on("click", function () {
        recognition.start();

    });
    $("#stop").on("click", function () {
        recognition.stop();
    });
});