[React] SpeechSynthesis

이전 게시글에서 랜덤한 단어가 출력되도록 구현하였는데

출력된 단어를 버튼 클릭 시 사용자가 발음을 들어볼 수 있도록 구현하려고한다.

[React - Node.js - MySQL] 연동, 데이터 출력

 

 

SpeechSynthesis 

• 웹 브라우저에서 기본으로 제공하는 SpeechSynthesis API만 사용해도 쉽게 구현 가능
• Chrome, Edge, Safari, Firefox 대부분에서 작동
• 별도 설치 없이 window 객체를 통해 바로 사용 가능

const handleSpeak = () => {
    const utterance = new SpeechSynthesisUtterance(word);
    utterance.lang = 'en-US';
    window.speechSynthesis.speak(utterance);
};

• SpeechSynthesisUtterance : 읽고 싶은 문장 또는 단어를 담는 객체 - props로 전달된 영어 단어를 담음
• utterance.lang : 발음, 언어 지정. en-US (미국식 영어), en-GB (영국 영어), ko-KR (한국어), ja-JP (일본어)
• speechSynthesis 로 브라우저가 음성을 읽도록

- 추가적인 옵션

• .rate (속도 조절, 기본 1)
• .pitch (높낮이)
• .volume (음량)
• .voice (목소리 종류 선택)

// 일시 중지
window.speechSynthesis.pause();
// 다시 재생
window.speechSynthesis.resume();
// 중지
window.speechSynthesis.cancel();

 

 

 

"이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다."