Web Speech API 사용법

Introduction

Web API에서 제공하는 Web Speech API는 유저가 말한 것을 Text로 변경해주는 음성 인식 API 입니다. Google speech 보다는 좋지는 않지만 무료인걸 감안하면 생각보다 괜찮다고 느껴집니다.

Web Speech API 사용하기 위해서는 마이크가 있어야 하며 브라우저의 마이크 Permission이 허용된 상태여야 합니다.

Browser Support

if ('webkitSpeechRecognition' in window) {
  console.log('Speech Recognition is avaialable')
} else {
  console.log('Speech Recognition Not Available')
}

우선 Browser 가 지원을 하는지 확인하는 과정이 필요합니다.

 

`SpeechRecognition()`

let recognition = new webkitSpeechRecognition();

SpeechRecognition 인터페이스는 최신브라우저에서 작동을 하지 않기 때문에, 최신브라우저에서 사용이 가능한 webkitSpeechRecognition로 인스턴스를 생성해줍니다.

Methods

recognition.start();
recognition.stop();

start()	음성인식을 시작합니다.
stop()	음성인식을  중단합니다. 그리고 결과물을 반환합니다.
abort()	음성인식을  종료합니다.

사용자가 말하고 있던 도중에 stop() 메소드가 호출이 될 경우 말하고있던 결과물을 반환하는데 반면에 abort() 메소드는 결과를 반환하지 않고 그 즉시 중단 시킵니다.

Event Listeners

recognition.onresult = function(event) {
  // 결과물
}

recognition.onspeechend = function() {
  // 말하기가 끝났을 때
  recognition.stop();
}

여러 Evenets

onresut	음성인식이  끝났을 때 결과물에 대한 Event 입니다. 모든 결과물을 여기서 핸들링합니다.
onspeechend	음석인식이 끝났을 때의 Event입니다.
onstart	음성인식이 시작했을 때의 Event입니다.
onnomatch	GrammarList를 사용했고, 알맞는 단어가 없을 때의 대한 Event 입니다.
onend	음석인식이 discconnected 되었을 때의 Event입니다.
onspeechstart	음성인식이 시작되었을 때의 Event입니다.
onerror	에러가 발생했을 때의 Event입니다.

설정

interimResults	boolean	True 일 경우 중간 결과와 최종결과를 반환합니다. False 일 경우 최종 결과만을 반환합니다.
continuous	boolean	사용자가 중지하지 않을 때 까지 계속해서 음성인식인을 진행합니다.
lang	string	음성인식 사용자의 언어를 선택 할 수 있습니다. 한글로 설정시 한글을 주로 변환시킵니다. 기본적으로 시스템 언어를 사용합니다.

사용해보기

HTML

<div class="font-sans ">
  <div class="flex">
    <div>
      Status:
    </div>
    <div id="status">
      WAITING
    </div>
  </div>
  <div class="border py-2">
    <div class="flex">
      <div>
        Final:
      </div>
      <div id="final">
      </div>
    </div>
    <div class="flex">
      <div>
        interim:
      </div>
      <div id="interim">
      </div>
    </div>
  </div>
  <div>
    <button id="start-btn">
      Start
    </button>
    <button id="stop-btn">
      Stop
    </button>
  </div>
</div>

HTML을 위와 같이 구성해주세요.

Script

// 브라우저가 Support를 하는지 확인
if ("webkitSpeechRecognition" in window) {
  // webkitSpeechRecognition 인스턴스
  let speechRecognition = new webkitSpeechRecognition();

  // Final transcription은 여기에 담아질 예정
  let finalTranscript = "";

	
  speechRecognition.continuous = true; // Stop 버튼을 클릭하기 전 까지 지속적으로 들을 예정
  speechRecognition.interimResults = true; // InterimResults 테스트 결과를 보여주려고 True로 설정했습니다.

  // Callback Function for the onStart Event
  speechRecognition.onstart = () => {
    document.querySelector("#status").innerHTML = 'START'
  };
  speechRecognition.onerror = () => {
    document.querySelector("#status").innerHTML = 'ERROR'
  };
  speechRecognition.onend = () => {
    document.querySelector("#status").innerHTML = 'WAITING'
  };

  speechRecognition.onresult = (event) => {
    let interimTranscript = "";

    // Loop through the results from the speech recognition object.
    for (let i = event.resultIndex; i < event.results.length; ++i) {
      // Result는 2차원 배열로 되어있습니다.
      if (event.results[i].isFinal) {
        finalTranscript += event.results[i][0].transcript;
      } else {
        interimTranscript += event.results[i][0].transcript;
      }
    }

    // 데이터를 변경해줍니다.
    document.querySelector("#final").innerHTML = finalTranscript;
    document.querySelector("#interim").innerHTML = interimTranscript;
  };

  // Start button click event handler
  document.querySelector("#start-btn").onclick = () => {
    // Start the Speech Recognition
    speechRecognition.start();
  };
  // Stop button click event handler
  document.querySelector("#stop-btn").onclick = () => {
    // Stop the Speech Recognition
    speechRecognition.stop();
  };
} else {
  console.log("Speech Recognition Not Available");
}

위 코드들을 복사 붙여넣기 하고 START 버튼을 클릭하면 음성인식이 시작됩니다. STOP 버튼을 클릭하면 음성인식이 종료됩니다.

 

Advanced - 모바일에서의 Continous 기능

아쉽게도 모바일에서 보안상의 이유로 Continous 기능을 사용할 수 없습니다. 만약 모바일기기에서 테스트해보셨다면 계속 꺼지는걸 확인해 볼 수 있습니다. 하지만 몇 가지 트릭을 활용하면 이를 해결 할 수 있습니다.

// 브라우저가 Support를 하는지 확인
if ("webkitSpeechRecognition" in window) {
  // webkitSpeechRecognition 인스턴스
  let speechRecognition = new webkitSpeechRecognition();

  // Final transcription은 여기에 담아질 예정
  let finalTranscript = "";
  // 다시 시작할것인지에 대한 Flag
  let isContinous = false;

	
  speechRecognition.continuous = false; // 모바일에서는 작동하지 않음
  speechRecognition.interimResults = true; // InterimResults 테스트 결과를 보여주려고 True로 설정했습니다.

  // Callback Function for the onStart Event
  speechRecognition.onstart = () => {
    document.querySelector("#status").innerHTML = 'START'
  };
  speechRecognition.onerror = () => {
    document.querySelector("#status").innerHTML = 'ERROR'
  };
  speechRecognition.onend = () => {
    document.querySelector("#status").innerHTML = 'WAITING'
  };
  
  speechRecognition.onspeechend = () => {
	// 다시 시작
    if(isContinous)
    	speechRecognition.start();
  };

  speechRecognition.onresult = (event) => {
    let interimTranscript = "";

    // Loop through the results from the speech recognition object.
    for (let i = event.resultIndex; i < event.results.length; ++i) {
      // Result는 2차원 배열로 되어있습니다.
      if (event.results[i].isFinal) {
        finalTranscript += event.results[i][0].transcript;
      } else {
        interimTranscript += event.results[i][0].transcript;
      }
    }

    // 데이터를 변경해줍니다.
    document.querySelector("#final").innerHTML = finalTranscript;
    document.querySelector("#interim").innerHTML = interimTranscript;
  };

  // Start button click event handler
  document.querySelector("#start-btn").onclick = () => {
    // Start the Speech Recognition
    speechRecognition.start();
    isContinous = true;
  };
  // Stop button click event handler
  document.querySelector("#stop-btn").onclick = () => {
    // Stop the Speech Recognition
    speechRecognition.stop();
    isContinous = false;
  };
} else {
  console.log("Speech Recognition Not Available");
}

isContious라는 Flag 변수를 만들고 자동적으로 꺼지더라도 stop 버튼을 통해 끈게 아니라면 다시 시작해주면 됩니다.

Reference

https://developer.mozilla.org/en-US/docs/Web/API/Web_Speech_API

Web Speech API - Web APIs | MDN

https://medium.com/@johnteckert/say-that-again-ed8667b689ca#:~:text=abort()%20which%20stops%20the,attempts%20to%20return%20a%20speechRecognitionResult%20. 

Say That Again!

https://www.section.io/engineering-education/speech-recognition-in-javascript/

Speech Recognition Using the Web Speech API in JavaScript

https://wicg.github.io/speech-api/#introduction

Web Speech API