JavaScript는 말할 수 있습니다! 음성 합성 API 사용

브라우저에서 사용률이 매우 낮은 기능은 텍스트 음성 변환입니다. 음성 합성 API를 사용하면 JavaScript를 사용하여 "브라우저가 말하도록"할 수 있습니다. 예를 들면 다음과 같습니다.

const message = new SpeechSynthesisUtterance(
    "Hi! This is an example of the Speech Synthesis API"
);
message.lang = "en-US";

const voices = speechSynthesis
    .getVoices()
    .filter(voice => voice.lang === "en-US");
message.voice = voices[0];

speechSynthesis.speak(message);

라이브 예 보기: https://jsfiddle.net/holanicozerpa/4h2sf9gL/6/

예제에서 볼 수 있듯이 음성 합성 API의 핵심 부분 중 하나는 SpeechSynthesisUtterance 클래스입니다. 이 클래스의 객체는 브라우저가 나중에 큰 소리로 읽을 텍스트를 나타냅니다.

다른 핵심 부분은 speechSynthesis 개체입니다. 컨트롤러 역할을 하는 전역 개체입니다. 무엇보다도 이 개체에는 사용 가능한 음성 목록이 있습니다. 결정적인speak 방법도 있습니다.
SpeechSynthesisUtterance를 생성할 때 두 가지 방법으로 텍스트를 설정할 수 있습니다. 첫 번째는 생성자에 텍스트를 넣는 것이고(예제처럼) 두 번째는 text 속성을 사용하는 것입니다.

필수는 아니지만 언어도 설정해야 합니다. 이는 해외 사용자가 잘못된 언어와 잘못된 발음으로 된 텍스트를 듣는 것을 방지하기 위한 것입니다.

Firefox와 Chrome에서는 텍스트와 언어를 설정하는 것으로 충분합니다. speechSynthesis.speak 메서드를 사용하여 발화를 매개 변수로 보내면 텍스트를 듣게 됩니다. 그러나 아마도 Safari에서는 작동하지 않을 것입니다. 또한 사용할 음성을 설정해야 합니다.

다행히 speechSynthesis.getVoices() 메서드를 사용하여 사용 가능한 음성 목록을 가져올 수 있습니다. SpeechSynthesisVoice 개체의 배열을 반환합니다. 이 개체는 각각 lang 속성을 가지며 발화 개체와 동일한 언어의 음성을 선택해야 합니다.

마지막으로 voice 속성을 사용하여 발화 개체에 음성을 연결할 수 있습니다. 그렇게 하면 Safari에서도 음성 합성이 작동합니다.


이 기사가 마음에 드셨다면 제 JavaScript 뉴스레터도 마음에 드실 것입니다.
격주 월요일마다 JavaScript 기술 수준을 높일 수 있는 쉽고 실행 가능한 단계를 보내드립니다. 확인해보세요: https://nicozerpa.com/newsletter