Web Speech API - SpeechSynthesis

 

 

✅ 설명

Web Speech API는 음성 데이터를 웹에서 사용할 수 있게 한다.

Web Speech API는 두 가지 종류로 나뉘는데 이는 텍스트를 음성으로 변환하는 SpeechSynthesis와 비동기적으로 음성을 인식하는 SpeechRecognition이다.

 

SpeechRecognition(음성 인식)은 일반적인 장치의 오디오 입력에서 음성 컨텍스트를 인식하고 적절하게 응답하는 기능을 제공한다.

일반적으로 음성이 입력될 때 여러 이벤트를 처리할 수 있는 개체를 만든다.

 

SpeechSynthesis(음성 합성)는 음성 서비스를 위한 컨트롤러 인터페이스이다.

SpeechSynthesis는 텍스트를 알맞은 음성으로 대치시키고 해당 음성을 들리게 하거나 멈출 수 있다.

 

정리하자면 SpeechSynthesis를 사용하여 웹에서 사용자에게 입력받은 텍스트를 음성으로 변환할 수 있다.

 

 

✅ 실행

See the Pen Untitled by rnrn99 (@rnrn99) on CodePen.

 

먼저 SpeechSynthesis를 사용한 예제를 간단하게 구현해 보았다.

버튼을 누르면 사용자에게 입력을 받을 수 있고 해당 입력을 음성으로 변환해 출력한다.

 

아래는 MDN에서 제공하는 데모 버전을 이해하기 쉽게 일부분을 바꾼 것이다.

SpeechSynthesis는 다양한 언어를 지원하며 음성의 속도와 높낮이 또한 바꿀 수 있는 것을 확인할 수 있다.

 

 

See the Pen Untitled by rnrn99 (@rnrn99) on CodePen.

 

 

✅ 분석

 

let utterance = new SpeechSynthesisUtterance("Hello world!");
speechSynthesis.speak(utterance);

 

위 코드는 첫 번째 예제에서 사용한 코드이다.

utterance라는 변수에 SpeechSynthesisUtterance 객체를 저장하는데 이때 음성으로 변환할 텍스트가 객체의 argument에 들어간다.

그리고 SpeechSynthesis.speak의 인자로 SpeechSynthesisUtterance 객체를 저장한 변수 utterance가 전달되며 입력한 텍스트가 음성으로 변환돼 출력된다.

 

 

SpeechSynthesis는 5개의 메서드를 지원한다.

 

SpeechSynthesis.cancel()

현재 존재하는 utterance queue에서 대기중인 모든 utterance를 삭제한다.

음성 출력되고 있는 중이라면 음성 출력을 즉시 종료한다.

 

SpeechSynthesis.getVoices()

현재 기기에서 출력 가능한 SpeechSynthesis에서 제공하는 음성 객체들을 리턴한다.

 

SpeechSynthesis.pause()

음성 출력을 일시중지한다.

 

SpeechSynthesis.resume()

음성 출력을 일시중지하지 않은 상태로 만든다.

이미 일시중지된 경우 다시 시작한다.

 

SpeechSynthesis.speak()

인자로 전해진 것을 utterance queue에 삽입한다.

다른 utterance가 실행 중이라면 대기 후 출력된다.

 

 

🔍 참조

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

Web Speech API - Web APIs | MDN

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

SpeechSynthesis - Web APIs | MDN