자바스크립트에서 TTS 기능을 사용하는 방법입니다. TTS(Text-to-Speech)는 텍스트를 음성 합성을 통해 컴퓨터가 읽어주는 것으로 트위치 영상등에 있는 음성 도네이션이 TTS 를 사용합니다.

음성합성으로 읽을 내용, 언어, 음성의 속도 높낮이 등을 <span class="pl-k">new</span><span> </span><span class="pl-v">SpeechSynthesisUtterance</span><span class="pl-kos">(</span>) 로 설정하고 재생은 speechSynthesis.speak()를 사용합니다. speechSynthesiswindow 객체 내에 있기 때문에 그냥 사용하면 됩니다. 재생중인 음성합성을 중지할때는 speechSynthesis.cancel()을 사용합니다.


<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<select id="select-lang">
<option value="ko-KR">한국어</option>
<option value="ja-JP" selected>일본어</option>
<option value="en-US">영어</option>
</select>
<textarea id="text" rows="5" cols="20"></textarea>
<button id="btn-read">읽기</button>
<script>
function speak(text, opt_prop) {
if (typeof SpeechSynthesisUtterance === "undefined" || typeof window.speechSynthesis === "undefined") {
alert("이 브라우저는 음성 합성을 지원하지 않습니다.")
return
}
window.speechSynthesis.cancel() // 현재 읽고있다면 초기화
const prop = opt_prop || {}
const speechMsg = new SpeechSynthesisUtterance()
speechMsg.rate = prop.rate || 1 // 속도: 0.1 ~ 10
speechMsg.pitch = prop.pitch || 1 // 음높이: 0 ~ 2
speechMsg.lang = prop.lang || "ko-KR"
speechMsg.text = text
// SpeechSynthesisUtterance에 저장된 내용을 바탕으로 음성합성 실행
window.speechSynthesis.speak(speechMsg)
}
// 이벤트 영역
const selectLang = document.getElementById("select-lang")
const text = document.getElementById("text")
const btnRead = document.getElementById("btn-read")
btnRead.addEventListener("click", e => {
speak(text.value, {
rate: 1,
pitch: 1.2,
lang: selectLang.options[selectLang.selectedIndex].value
})
})
</script>
</body></html>

view raw

tts.html

hosted with ❤ by GitHub

 

문의 | 코멘트 또는 yoonbumtae@gmail.com




2개의 댓글

dd · 2021년 9월 15일 1:02 오전

개쩌네 ㅋㅋ

개발자 · 2022년 3월 20일 12:01 오후

큰 도움이 되었습니다. 감사합니다~~

답글 남기기

Avatar placeholder

이메일 주소는 공개되지 않습니다. 필수 필드는 *로 표시됩니다