[해피CGI][cgimall] speechSynthesis 를 이용한 음성 합성

HTML5의 Speech Synthesis API에 대해서 소개 합니다.

SpeechSynthesis 는 텍스트를 음성으로 변환해주는 TTS API 입니다.

예전에 TTS 서비스가 있었지만 유료이거나 웹에서 사용하기 어려운 경우가 많았습니다.

하지만 이제는 HTML5 의 내장 기능으로 쉽게 웹에서 사용할 수 있습니다. 


당연히 쉽게 사용할 수 있다는 것은 장점입니다. 

하지만 HTML5 기능을 지원하지 않는 브라우저 또는 internet Explorer 과 같은 지원은 하지만 

완벽하게 지원하지 않는 브라우저에서는 사용할 수 없다는 단점도 있습니다. 

하지만 HTML5 의 지원여부는 시간이 지나면 자동 해결되지 않을까 생각 합니다. 


간단한 브라우저별 지원 목록과 API를 보고 싶다면 아래의 링크를 클릭하세요.

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

상세한 브라우저 별 지원여부를 보고 싶다면 아래의 링크를 클릭하세요.

 

첨부된 파일을 압축해제하면 Creative Punch 에서 제공한 코드를 이용하여 샘플 페이지를 만든 파일을 다운로드 할 수 있습니다.

 

사용해보니 Edge 브라우저는 음성에 제한이 있었습니다. 

아마 윈도우의 종류에 따라서 음성 지원이 제한되는 느낌이였습니다. 


크롬의 경우 여러 음성을 골고루 지원하고 있었습니다. 

크롬의 언어 지원 목록은 아래의 리스트를 참고하세요. 

"Microsoft Heami Desktop - Korean" "(default)"
"Microsoft Zira Desktop - English (United States)" ""
"Google Deutsch" ""
"Google US English" ""
"Google UK English Female" ""
"Google UK English Male" ""
"Google español" ""
"Google español de Estados Unidos" ""
"Google français" ""
"Google हिन्दी" ""
"Google Bahasa Indonesia" ""
"Google italiano" ""
"Google 日本語" ""
"Google 한국의" ""
"Google Nederlands" ""
"Google polski" ""
"Google português do Brasil" ""
"Google русский" ""
"Google 普通话（中国大陆）" ""
"Google 粤語（香港）" ""