[JS] 브라우저에서 말 하기 👄 | SpeechSynthesis

브라우저에서 보이스웨어를 사용하기 위한 방법에는 SpeechSynthesis를 사용하는 방법이 있다.

 

SpeechSynthesis는 말 하고싶은 단어나 문장을 사용자의 언어 환경에 맞추어 보이스웨어로 실행시킬 수 있다.

 

const speech = new SpeechSynthesisUtterance('안녕하세요!')

speechSynthesis.speak(speech)

 

하지만 아직 실험 기능인 것과, 브라우저의 정책에 막혀 실행할 수 없는 경우가 있다.

 

사용자의 인터렉션이 일어나지 않았을 경우에는 각 브라우저의 정책에 의해 SpechSynthesis가 동작하지 않는다.

왜냐하면 내가 아무것도 하지 않았는데 갑자기 브라우저에서 소리가 들린다면 그것은 조금 무서운 경험, 좋지 않은 경험이 될 것이기 때문이다.

하지만 사용자는 웹 페이지에 콘텐츠가 있는 이상 UI와 인터렉션을 시도할 것임으로 브라우저 정책인 사용자 인터렉션 조건을 충족하기 때문에 비동기를 적용하여 SpeechSynthesis를 실행시킬 수 있다. 

ex) setTimeout few seconds

setTimeout(() => {
  const speech = new SpeechSynthesisUtterance('안녕하세요!')
  speechSynthesis.speak(speech)
}, 2000)

 

좋은 방향으로 사용한다면 시각 장애인들의 접근성을 향상시키고자 이 객체를 사용할 수 있을 것이다.
예를 들어 모든 HTML 요소 혹은 일부에 SpeechSynthesis 적용 등..

하지만 아직 실험적인 요소이기 때문에 일부 브라우저에선 특정 기능(SpeechSynthesis.<methods>)이 작동하지 않을 수 있다.

브라우저 호환성 참고
https://developer.mozilla.org/en-US/docs/Web/API/SpeechSynthesisUtterance/onend#browser_compatibility