Node.js : webkitSpeechRecognition 를 이용해서 Speech-to-text

이번 글에서는 google의 Speech-to-Text API 정보를 찾아보다가 알게 된 webkitSpeechRecognition에 대해 포스팅해보도록 하겠습니다. webkitSpeechRecognition을 이용하면 내가 녹음하는 동안 연결했던 html의 text에 자동으로 출력되는 것을 확인할 수 있습니다.

1) html에 녹음버튼과 결과값 출력할 text 만들기

<a href="#" id="record_start" style="text-decoration:none;color:black;">녹음시작</a> 
<span id="record_msg" style="margin-left: 50px;"></span>

2) webitSpeechRecognition으로 출력하기

var r=document.getElementById('record_msg');

        function webkitSpeech()
        {
            if('webkitSpeechRecognition'in window){
                //Web speech API Function
                var speechRecognizer = new webkitSpeechRecognition();
                speechRecognizer.continuous = true;
                speechRecognizer.interimResults = true;
                //lang : language (ko-KR : Korean, en-IN : englist)
                speechRecognizer.lang="ko-KR";
                speechRecognizer.start();
    
                var finalTranscripts = '';
                speechRecognizer.onresult=function(event){
                    var interimTranscripts='';
                    for(var i=event.resultIndex; i < event.results.length; i++)
                    {
                        var transcript=event.results[i][0].transcript;
                        transcript.replace("\n","<br>");

                        //isFinal : if speech recognition is finished, isFinal = true
                        if(event.results[i].isFinal){
                            finalTranscripts+=transcript;
                        }
                        else{
                            interimTranscripts+=transcript;
                        }
                    }
                    //insert into HTML
                    r.innerHTML=finalTranscripts+'<span style="color:#999">'+interimTranscripts+'</span>';
                };
                speechRecognizer.onerror = function(event){
                };
            }
            else{
                //if browser don't support this function. this message will show in your web
                r.innerHTML ="your browser is not supported. If google chrome. Please upgrade!";
            }
        }