ETC - 2022. 2. 11.

음성 인식 검색(JS)

🎤음성 인식 검색(JS)

안녕하세요 TriplexLab 입니다.
오늘의 예제는 음성 검색에 관해서 살펴 보도록 하겠습니다.
웹에서 음성 인식 추출 API( Web Speech API ) 사용합니다.
기본으로 제공해주고 있어 별도의 작업 없이 사용할 수 있습니다만, 아쉽게도 PC에서 현재는 Chrome, Edge, Safari에서만 제공되고
모바일에서는 안드로이드, 사파리, 등등 제공되고 있네요.

💻브라우저 스팩 확인하기

👉만들어볼 예제

유튜브 영상[링크참고]

타자가 아니라, 브라우저에서 음성으로 검색어에 입력을 하는 모습 입니다.
로컬에서 테스를 하였는데 매우 잘 동작 하네요 😃😃👍

👉소스코드 공유

HTML 구조는 다음과 같이 생겼습니다.

<div class="search">
    <div class="input-bar">
        <input type="text" placeholder="검색어 입력" autocomplete="off">
        <button class="dictate">
            <i class="ic-mike"></i>
            <svg width="1.25rem" height="1.25rem" viewBox="0 0 100 100">
                <g stroke="#fff" stroke-width="15">
                    <path d="M20,20 20,80">
                        <animate attributeName="d" values="M20,40 20,60;M20,20 20,80;M20,40 20,60" dur="1s" repeatCount="indefinite" />
                    </path>
                    <path d="M50,10 50,90">
                        <animate attributeName="d" values="M50,10 50,90;M50,40 50,60;M50,10 50,90" dur="1s" repeatCount="indefinite" />
                    </path>
                    <path d="M80,20 80,80">
                        <animate attributeName="d" values="M80,40 80,60;M80,20 80,80;M80,40 80,60" dur="1s" repeatCount="indefinite" />
                    </path>
                </g>
            </svg>
        </button>
    </div>
</div>

onresult관한 이벤트에 관해서 살펴볼게요

recognition.onresult = function(e) { //result이벤트는 음성 인식 서비스가 결과를 반환할 때 시작됩니다.
    console.log(e)
};

객체 transcript라는 곳에 텍스트가 들어간 모습을 확인 할수 있습니다.

다음에는 store라는 객체에 texts라는곳에 담아 두어 콘솔에 찍어 봤습니다.
실시간으로 인식한 데이터 최종 값이 계속해서 갱신됩니다.
여러 문장이 인식된 경우, 인덱스를 달리하여 각 results 객체 안에 정보를 담아 리턴됩니다.

recognition.onresult = function(e) { //result이벤트는 음성 인식 서비스가 결과를 반환할 때 시작됩니다.
    store.texts = Array.from(e.results)
    	.map(results => results[0].transcript).join("");

    console.log(store.texts)
};

👉전체 소스코드(JS)

const $ = (el) => document.querySelector(el);
	
const store = {
    texts : '',
    isRecognizing: true
};

(() => {
    /* Speech API start */
    let SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
    if(!("webkitSpeechRecognition" in window)){
        alert("지원 안되는 브라우저 입니다. !")
    } else {			
        const recognition = new SpeechRecognition();
        recognition.interimResults = true; // true면 음절을 연속적으로 인식하나 false면 한 음절만 기록함
        recognition.lang = 'ko-KR'; // 값이 없으면 HTML의 <html lang="en">을 참고합니다. ko-KR, en-US
        recognition.continuous = false; //각 인식에 대해 연속 결과가 반환되는지 아니면 단일 결과만 반환되는지를 제어합니다. 기본값은 단일( false.)
        recognition.maxAlternatives = 20000; // maxAlternatives가 숫자가 작을수록 발음대로 적고, 크면 문장의 적합도에 따라 알맞은 단어로 대체합니다.

        recognition.onspeechend = function() { // 음성 감지가 끝날때 실행될 이벤트
            recognition.stop();
            $('.dictate').classList.remove("on");
            store.isRecognizing = true;
        };

        recognition.onresult = function(e) { //result이벤트는 음성 인식 서비스가 결과를 반환할 때 시작됩니다.
            store.texts = Array.from(e.results)
                            .map(results => results[0].transcript).join("");

            console.log(store.texts)
            $('input').value = store.texts;
        };
        /* // Speech API END */

        const active = () => {
            $('.dictate').classList.add('on')
            recognition.start();
            store.isRecognizing = false;
        };

        const unactive = () => {
            $('.dictate').classList.remove('on')
            recognition.stop();
            store.isRecognizing = true;
        };

        $('.dictate').addEventListener('click', () => {
            if(store.isRecognizing){
                active();
            } else {
                unactive();
            }
        });
    }
})();

👉전체 소스코드

전체 소스코드를 github에도 공유합니다.😃🔥👍

GitHub - younhoso/younhoso

Contribute to younhoso/younhoso development by creating an account on GitHub.

github.com

🎯결과

음성으로 텍스트 작성하기

🎯참고자료

SpeechRecognition - Web APIs | MDN

The SpeechRecognition interface of the Web Speech API is the controller interface for the recognition service; this also handles the SpeechRecognitionEvent sent from the recognition service.

developer.mozilla.org

저작자표시

Contents

새소식

인기 검색어