Web Speech Synthesis API 치트시트

Web Speech API의 speechSynthesis 인터페이스를 사용하면 웹 애플리케이션에서 텍스트 기반 합성 음성을 출력할 수 있습니다.

기본 음성 합성

const msg = new SpeechSynthesisUtterance('안녕하세요, 세계!');
window.speechSynthesis.speak(msg);

음성 속성 및 이벤트 맞춤설정

const msg = new SpeechSynthesisUtterance('애플리케이션에 오신 것을 환영합니다');

msg.rate = 1.0;   // 속도: 0.1 ~ 10 (기본값 1)
msg.pitch = 1.2;  // 음높이: 0 ~ 2 (기본값 1)
msg.volume = 1.0; // 음량: 0 ~ 1 (기본값 1)
msg.lang = 'en-US';

// 이벤트 리스너
msg.onstart = () => console.log('음성 재생 시작됨');
msg.onend = () => console.log('음성 재생 완료됨');
msg.onerror = (e) => console.error('음성 오류:', e);

window.speechSynthesis.speak(msg);

설치된 음성 선택

window.speechSynthesis.onvoiceschanged = () => {
  const voices = window.speechSynthesis.getVoices();
  const selectedVoice = voices.find(v => v.lang === 'en-US' && v.name.includes('Google'));
  if (selectedVoice) {
    msg.voice = selectedVoice;
  }
};

재생 제어

window.speechSynthesis.pause();   // 음성 재생 일시정지
window.speechSynthesis.resume();  // 일시정지된 재생 다시 시작
window.speechSynthesis.cancel();  // 음성 대기열 취소 및 지우기

참고자료

• MDN: SpeechSynthesis
• MDN: SpeechSynthesisUtterance