말하는 웹 앱 - Speech Synthesis API 소개

Web Speech API는 JavaScript에 음성 인식 (음성 텍스트 변환) 및 음성 합성 (텍스트 음성 변환)을 추가합니다. 이 게시물에서는 최근 Chrome 33 (모바일 및 데스크톱)에 API가 출시되었으므로 후자를 간략히 다룹니다. 음성 인식에 관심이 있다면 글렌 샤이어스가 얼마 전에 작성한 음성 인식 기능에 관한 훌륭한 문서인 '음성 기반 웹 앱: Web Speech API 소개'를 참고하세요.

기본사항

합성 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);

음성 설정

또한 이 API를 사용하면 엔진에서 지원하는 음성 목록을 가져올 수 있습니다.

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

그런 다음 음성 객체에서 .voice를 설정하여 다른 음성을 설정합니다.

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

데모

Google I/O 2013 강연인 '더욱 멋진 웹: 항상 원했던 기능' (www.moreawesomeweb.com)에서 Web Speech API의 SpeechRecognition 서비스를 Google Translate API와 함께 사용하여 마이크 입력을 다른 언어로 자동 번역하는 Google Now/Siri와 유사한 데모를 보여드렸습니다.

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

안타깝게도 문서화되지 않은 비공식 API를 사용하여 음성 합성을 실행했습니다. 이제 번역을 다시 말해 주는 전체 Web Speech API가 준비되었습니다. 합성 API를 사용하도록 데모를 업데이트했습니다.

브라우저 지원

Chrome 33은 Web Speech API를 완전히 지원하지만 iOS7용 Safari는 부분적으로 지원합니다.

기능 감지

브라우저가 Web Speech API의 각 부분을 개별적으로 지원할 수 있으므로 (예: Chromium의 경우) 각 기능을 개별적으로 기능 감지하는 것이 좋습니다.

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

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