Rev. 2.73

구글 번역 서비스는 문자를 음성으로 들려주는 TTS(Text-To-Speech) 기능을 추가했다고 발표했습니다. 구글 번역 서비스를 사용하다 보면 TTS가 가능한 경우 파란색 스피커 아이콘이 나타나며, 이 버튼을 클릭하여 음성으로 들어볼 수 있습니다. 스피커 아이콘이 나타나는 경우는 영문으로 번역한 결과물을 얻었을 경우이며 한 번에 100개의 문자까지 처리할 수 있습니다. 번역 서비스에 TTS를 적용한 것으로 미루어 볼 때 향후 다국어가 지원될 확률이 높습니다. 이 페이지에서 파이어버그의 Net 패널을 통해 살펴 보면 "http://translate.google.com/translate_tts?tl=en&q=text"로 해당 문자를 전송하고 MP3 오디오 데이터를 응답으로 받아오는 모습을 확인할 수 있습니다.

Weston Ruter씨는 위 주소와 HTML5의 <audio> 요소를 이용하여 웹기반 TTS를 만들었습니다. translate.google.com으로 파일을 수신할 때 요청하는 곳의 정보(referrer)가 전달되면 "404 Not Found"로 응답한다고 하네요. 그리고 <audio>요소는 브라우저마다 처리할 수 있는 데이터 포멧이 다르기 때문에 MP3를 정상적으로 처리할 수 있는 크롬과 사파리 브라우저에서만 제대로 작동합니다. 만약 음성이 재생되지 않는다면, 버튼 옆에 나타난 링크를 새 창으로 열어서 MP3 파일을 직접 다운로드하여 재생할 수 있습니다. 현재 Weston Ruter씨는 WHATWG에 공식으로 TTS API를 만들어 달라고 요청했다고 합니다.

덧. MP3를 지원하지 않는 파이어폭스 브라우저에서는 soundManager2를 이용하여 재생합니다.

Comments

Roman Cortes씨는 자바스크립트를 사용하지 않고 CSS와 HTML만으로 3차원 패럴랙스(시차) 효과를 만들어 냈습니다. 좌측 회화에 마우스 포인터를 올리고 움직여 보세요. 그저 놀라울 따름입니다.

소스코드를 열어보니 엄청난 노가다를 하셨더군요. 너비가 5픽셀 짜리인 <a> 요소를 촘촘하게 배치하고 해당 요소의 :hover액션에 의하여 상황에 맞은 이미지와 포지션을 출력한 것입니다. 참 대단하신 분입니다.

반투명 PNG 이미지 포멧을 사용하므로 이를 지원하지 않는 브라우저에서(IE 8 이하)는 정상적으로 보이지 않을 것입니다.

Comments