말하는 웹 앱 - Speech Synthesis API 소개

에릭 비델만
Twitter GitHub 홈페이지

Web Speech API는 JavaScript에 음성 인식 (음성 텍스트 변환) 및 음성 합성 (텍스트 음성 변환)을 추가합니다. 이 게시물에서는 최근 Chrome 33 (모바일 및 데스크톱)에서 API가 출시됨에 따라 후자를 간략하게 다룹니다. 음성 인식에 관심이 있는 사용자라면 Glen Shires가 'Voice driven Web Apps: Introduction to the 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 대담 'More Awesome Web: 귀하가 항상 원했던 기능' (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를 완전하게 지원하고, iOS 7용 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!
}