[업데이트] 말하는 웹앱 - Speech Synthesis API (Web apps that talk - Introduction to the Speech Synthesis API)

+Eric Bidelman이 재밌는 포스트를 올렸네요. 바로 Web Speech API입니다. 아주 간단한 형식으로 되어 있는 API들이지만 손쉽게 TTS(Text To Speech)를 수행하며, 반대로 STT(Speech To Text)를 수행할 수도 있습니다. 현재는 크롬에서만 지원하고 있는 기능이지만 유용하게 사용할 수 있는 기능입니다. 무엇보다 쉬워서 재밌네요! :)

• 원문 - Web apps that talk - Introduction to the Speech Synthesis API

전문

Web Speech API는 음성인식(Voice recognition, Speech To Text)와 음성합성(Speech synthesis, Text To Speech) 기능을 자바스크립트에 추가하였습니다. 이 포스트는 Chrome 33 버전(모바일 및 데스크탑)에 최근 추가된 API에 대한 마지막 버전을 대략적으로 포함하고 있습니다. 만약 음성 인식에 흥미가 있으시다면 Glen Shires가 얼마전
음성 인식 기능에 대해 쓴 "말로 동작하는 웹앱: Web Speech API의 소개(Voice Driven Web Apps: Introduction to the Web Speech API)"을 참조하시기 바랍니다.

기초 사항

Synthesis API의 가장 기본적인 사용은 다음과 같이 speechSynthesis.speak()로 보내고 말로 표현하는 것입니다.

var msg = new SpeechSynthesisUtterance('Hello World');
window.speechSynthesis.speak(msg);

직접 시도해보세요! 

또한 볼륨, 말하는 속도, 음의 높이, 목소리 그리고 언어에 영향을 미치는 인자를 대치하는 것 역시 다음과 같이 가능합니다.

var msg = new SpeechSynthesisUtterance();
var voices = window.speechSynthesis.getVoices();
msg.voice = voices[10]; // Note: some voices don't support altering params
msg.voiceURI = 'native';
msg.volume = 1; // 0 to 1
msg.rate = 1; // 0.1 to 10
msg.pitch = 2; //0 to 2
msg.text = 'Hello World';
msg.lang = 'en-US';

msg.onend = function(e) {
  console.log('Finished in ' + event.elapsedTime + ' seconds.');
};

speechSynthesis.speak(msg);

목소리(Voice) 설정

또한 API를 통해 엔진에서 지원하는 목소리(Voice)의 리스트를 다음과 같이 얻을 수 있습니다.

speechSynthesis.getVoices().forEach(function(voice) {
  console.log(voice.name, voice.default ? '(default)' :'');
});

그리고나서 다음과 같이 utterance 객체의 .voice의 설정을 통해 다른 목소리를 설정할 수 있습니다.

var msg = new SpeechSynthesisUtterance('I see dead people!');
msg.voice = speechSynthesis.getVoices().filter(function(voice) { return voice.name == 'Whisper'; })[0];
speechSynthesis.speak(msg);

데모

구글 I/O 2013 발표 "더 멋진 웹: 여러분이 언제나 원하는 기능들(More Awesome Web: features you've always wanted)"에서 저는 구글 나우(Google Now)나 시리(Siri)와 비슷하게 Web Speech API의 SpeechRecognition 서비스와 구글 번역 API(Google Translate API)를 통해 마이크 입력을 다른 언어로 자동으로 번역하는 데모를 보여드렸습니다.

데모: http://www.moreawesomeweb.com/demos/speech_translate.html

불행하게도 이는 음성 합성(Speech synthesis)를 수행하기 위해 문서화되지 않은 기능(그리고 비공식적인 API)을 사용하였습니다. 자 이제 우리는 다시 번역을 말할 수 있는 완전한 Web Speech API를 가지게 되었습니다! 데모는 Synthesis API를 사용하도록 업데이트해두었습니다.

브라우저 지원

현재 Chrome 33 버전은 Web Speech API를 완전하게 지원하며 iOS7의 사파리는 일부의 기능을 지원하고 있습니다. 

기능의 지원여부 검사

(크로미움의 경우처럼) 각 브라우저들은 Web Speech API를 각 부분을 따로 지원하고 있을 것이므로 다음과 같이 각 기능을 분리하여 검사할 수 있습니다.

if ('speechSynthesis' in window) {
 // Synthesis support. Make your web apps talk!
}

if ('SpeechRecognition' in window) {
  // Speech recognition support. Talk to your apps!
}