Embian Blog

chrome speech synthesis service 개발기

- "크롬을 음성합성 서버"로 사용해보자

"사장님, 스마트 미러가 리눅스에서 잘 안돼요. 어떻하죠?"

.

.

.

작년 말에 접하게 된 마이크로소프트의 에반군이 만든 garage 프로젝트인 스마트미러(Smart Mirror) 에서 확인 했었고, 거의 모든 오픈소스 스마트 미러 프로젝트는 라즈베리파이(RPi)등의 Arm기반 보드에서 "리눅스"로 돌리고 있었기 때문에 믿기 힘든 비보였습니다.

"쫌! 잘해봐. 말이돼냐? (썩소)"  "아니예요, 실제 잘 안된다고 어디서 본것도 같아요.(떨리는 눈빛)"

'에이 설마, 또 초짜 주우우니어 호빗 개발자의 닥질..'  여전히 그 생각이였고, 솔직히 다른 OS에서 다되는데 리눅스에서 안된다는 건 약간은 리눅스(마이프레셔스!)를 데탑으로 끌어 안고 사는 한때 호빗 개발자였던 골름의 밥상에 돌 던진듯한 느낌을 받는... 

그래도 한번 속는셈 치고 들어나 보기로 했습니다.

"그래 뭐가 안된다는 건데?(썩소2)"       "아, 제가 이번에 연동한게 유투브, 지도API, 어쩌구 저쩌구..."

"아 그러니까 뭐가 안된다는 건데?(확신찬 썩소썩소썩소)"           ".. 그러니까.. 저.. 말하는게 안되요!"

"응?!?  혹시 말하기 기능 넣었어?(반짝반짝)"   "..네.."  (이 시점에서 소으니:골름 = 1:0!) 

바로 소으니는 맥에서 잘되는걸 보여줬고, 리눅스에서는 안되는것도 보여줬다. (2:0!)

"아.. 그..러네.  그래도 니가 비동기 방식의 javascript 쓰다가 뭔가 잘못한거?" (쓸데없는 의심, 3:0!)

"네,  그런데 일단 코드가 너무 간단해서... 잘못하기 힘든데요?"

크롬에서 음성합성 예제: HTML5 Speech Synthesis API 사용

========================================

여기서 말하기 기능이라는 것은 '음성합성' 또는 'Speech Synthesis'라고 불립니다.  다들 아시겠지만, 우리가 은행이나 콜센터에 전화를 걸었을 때 자동으로 대답을 해주는 약간 어색한 사람 목소리를 위장한 마디마디 리코딩된 기계음 등이 이 부류입니다.   

var utterance = new SpeechSynthesisUtterance('Hello, 세상');

var voices = window.speechSynthesis.getVoices();

utterance.voice = voices.filter(function(voice) { return voice.name == 'Google 한국의'; })[0];

window.speechSynthesis(utterance);

'잉, 코드군이 너무 간단한데? ' 

뒷목이 뻑뻑한 느낌이 들더군요. 지은죄가 있는지라 몇일 구글군의 힘을 빌어 뒷북 뒤지기를

시작했는데, 음성합성을 쓰기 위해서 엔지니어링 관점에서 몇가지 알고 있어야 될것들이 나왔습니다.

음성합성(Speech Synthesis) 간략정리

=========================

0. Speech Synthesis는 나름 긴역사가 있다.  특히 예전에 sphinxsearch검색하면 검색결과 밀어 

버리고 쓸데 없이 나오던 sphinx도 speech 관련해서 꽤 유명한 놈이더라. (제대로 잡설!)

1. 웹브라우저가 사용할수 있는 Speech Synthesis API는  Speech Recognition API와 나름 2년이나 되었다.  (since google chrome 33+, 현재 쓰고 있는 버젼은 48+)

구글 크롬이야 당연히 지원하고 있었고, 사파리도 지원하고 브라우저들이 다들 지원하는 분위기다.

2.  위의 내용 1을 순진하게 믿고 테스트 하다보면, 지금 그닥 쓸만한 놈은 chrome이다.  

     그리고 된다는 SSML은 아직 안된다.  SSML은 음성합성을 XML로 표기하여 끝말올리기, 반복하기 등을 표기할수 있는 방법입니다.    

3.  그리고 결정적인, Speech Synthesis가 "리눅스에서는 안되고, 맥에서는 된다"는 틀렸다.  

정확한 정보는 "(목소리가 없기 때문에) chromium에서는 안되고, chrome에서는 된다" 이다.  (앗싸.  3:1!)

3번은 알고 나면 허무하지만, 약간의 보충설명이 필요합니다. 그래서 조금 내용을 살펴 보겠습니다.

Chromium은 Chrome과 다르기 때문에 

구글의 완성도 높은  아름다운 목소리를 가져올수 없습니다.

======================================

원래 웹브라우저의 Speech Synthesis API에 대한 표준화 문서를 보면,

Speech Synthesis API는 API이지 실제 voice라는 리소스는 웹브라우저가 

지원(provision)할수도 있고, OS가 지원하는 네이티브 리소스로 (따라서 chrome external) 

voice를 사용할 수도 있습니다. (양자택일!)

그런데, 대부분의 우리가 수행했던 Speech Synthesis의 테스트는 

구글 크롬(default로 날아오는 voice는 google이 제공)했기 때문에 문제가 없었고, 

쓸수 있는 API만 있지만, chromium은 google의 voice API 키가 없기 때문에, 

말할 '목소리'가 없습니다. 

기계가 목소리가 없어서 인간이 안되고 결국 허무하게 여기서 거품으로 끝난다는건 어디서 많이본 

동화같습니다.(아이씨- 언더더씨 네요.)

그럼 소으니가 말했던 스마트 미러가 맥은 되고 리눅스에서는 목소리가 안나오는 이유는 뭘까요?  

네. 우리가 쓴 node.js의 electron은 (예전에는 ATOM으로 불렸었죠) chrom"ium"의 분신이고

따라서 보이스 실물 리소스가 존재하지 않습니다. 구글에서 허락없이 땡겨올수 없기 때문이죠.  

하지만, Mac에서 제공하는 네이티브 목소리가 있기 때문에 맥(electron)에서는 잘 되었던거고,

리눅스(electron)에서는 안된겁니다.  여기서 "댕~"하는 상황은 리눅스의 chrome에서는 되니까

더 헛갈린겁니다.  알고나면, 구글의 chrome이니까.  구글 목소리니까 당연한거죠.

즉, 확실한건 chrome != chromium에서 생기는 문제인거요. 

아, 참고로 chromium을 걍 컴파일 해서 쓸까 (electron) 했는데요, 저같은 생각을

하는 골름들이 무지 많나 봅니다. chromium 사이트에 노란색 볼드체 으로 

이렇게 적혀 있네요. ㅎ

https://www.chromium.org/developers/how-tos/api-keys

"Do NOT post to the various Chromium groups/mailing lists for questions about the Speech API."

(헐- 넹. 골름골름)

쓸데없는 소리 이제 그만!  Show Me! Please talk to me!

======================================

1)  기본테스트:   

너그러운 마음에서 데모 한번 봐주시고,  

http://speech.embian.com/

2)  확장테스트:

재미로 준비한 추가 데모 꼭 해보시고, 한번 쭉 소리나는거 들으시고, 

*setting: 의 en-GB 를 ko-KR로 바꿔 들어 보세요 ㅎ

(강추! 우리집 꼬마가 좋아합니다.)

중국어/영어/일어/스페인어등 언어 공부하시는 분들 무료로 활용법을 찾으시면

만든 골름은 무지 감사할것 같습니다. 

http://speech.embian.com/rap

3)  혹시 수정이나 설치 필요하신 분 계시면 github에서 오픈소스로 제공합니다.

https://github.com/embian-inc/chrome-speech-synthesis

아, 외로운 친구의 PC/폰에 크롬띄워놓고 이성의 목소리로 "밥 먹으로 가요"를 

날려볼수 있습니다.  퍽이나 재미집니다.  골름골름~

맺음말

=====

동굴에 들어간지 오래 되어 소스가 날것이라 전혀 이쁘지는 않습니다. 

지나가던 저희 개발자 호빗 무리들이 무지 비웃었습니다. 

하지만, 골름은 사랑받기 위해서 

태어난 한때 호빗이였던 아이입니다.              이뻐해 주시면 좋겠네요. (최종스코어:  3:2!)

그럼 전 가족부양하러 물고기 잡으러 다시 동굴로 돌아갑니다.긴글 읽어 주셔서 감사합니다. 

마이프레셔스, 골름골름~

ps 결국 구글님이 무료로 열어줘서 편하게 쓰지 않을까 생각합니다. 언젠가는 ^^ 

아님 네이버님, 왓쓴님 이라도.  아니면 누군가는 문익점 되서 디지탈씨앗 몇개 날라야죠, 뭐. 

References:

Standard for Web Speech Synthesis: 

* https://dvcs.w3.org/hg/speech-api/raw-file/tip/speechapi.html#examples-synthesis

Standard for SSML

* http://stackoverflow.com/questions/21952736/the-right-way-to-use-ssml-with-web-speech-api

* https://www.w3.org/TR/speech-synthesis11/#edef_emphasis

Main Code of Speech Synthesis API Example

* http://blog.teamtreehouse.com/getting-started-speech-synthesis-api

12월 중순 쯤 회사내에 흥미로운 동영상이 공유 되었는데 바로 smart-mirror 라는 프로젝트였습니다. 아래 동영상을 보시면 smart-mirror에서 사용자의 음성으로 지도나 philips hue 전등을 컨트롤 하는 모습을 보실 수 있을 것입니다. 되게 fancy해 보이지 않나요? smart-mirror에서 사용한 언어는 javascript이며  speech recognition library로는 annyang 을 사용하고 있었습니다.

[  smart-mirror[링크] ]

회사 내에서도 우리도 해보자라는 의견이 나오기도 했고 마침 이전 프로젝트도 끝나고 시간이 남아 Garage Project로 smart-mirror를 하게 되었습니다.2주 동안 진행했던 이 프로젝트의 1단계 목표는 아래와 같습니다.

이 프로젝트에서 추가로 사용한 API는 다음과 같습니다. 

smart-mirror는 소프트웨어 측면보다 하드웨어 측면에서 준비하는 시간이 걸렸습니다.

준비물(원하는 결과물에 따라 가격이 달라질 수 있습니다. )

하드웨어 구성을 살펴 보면 라즈베리파이 2, USB microphone, 모니터, one-way mirror, philips hue 전등으로 구성되어 있었는데  라즈베리파이 2 + 모니터  대신 사용한지 오래된 노트북이나 태블릿 등을 사용하였고, philips hue 전등은 프리스비에서 구매하였습니다. 한가지 남은게 있다면  one-way mirror가 관건이었습니다. 현재 한국에서 one-way mirror를 구하는 것이 어려울 뿐만 아니라 상당히 비싼 가격에 판매되고 있어서 대체 할 만한 것을 계속 찾아보다 유리에 미러필름을  붙였습니다. 

미러필름의 판매처는 다음 링크에서 확인하세요.[사이트내에 가격이 30m가 180,000원, 1m~2m가 18,000원에 판매 되고 있습니다. ]

미러필름을 붙이는데 상당히 애를 먹었습니다. 특히 아크릴에 경우 반나절 정도 지나자 기포가 올라오는 단점이 있어서 유리에 미러필름을 붙였습니다. 

[one-way mirror 제작 과정]

[절연테이프를 붙인 one-way mirror 뒷면]

[one-way mirror 앞면]

2주 동안 작업한 이 프로젝트의 최종 결과물은 다음과 같습니다.

[스마트 미러] 

코드는 다음 링크에서 확인하실 수 있습니다. Github : https://github.com/embian-inc/smart-mirror-ko.git

시연동영상은 다음과 같습니다.

현재 smart-mirror는 mac,window,ubuntu 환경에서 모두 사용 가능하며 android의 경우 다음링크를 참고하세요.