참고: https://www.assemblyai.com/blog/javascript-text-to-speech-easy-way/
앱을 만들 때 접근성, 편의성 또는 기타 이유로 텍스트의 음성 변환 기능을 구현할 수 있습니다. 이 포스트에서는 JavaScript의 내장 Web Speech API를 사용하여 매우 간단한 TTS 애플리케이션을 만드는 방법을 알아보겠습니다.
1. 기본 설정
먼저 index.html 이라는 HTML 파일과 script.js 라는 자바스크립트 파일을 사용하여 기본적인 애플리케이션을 설정하겠습니다.
HTML 파일 index.html은 JavaScript 파일과 함께 기능을 추가할 애플리케이션의 구조를 정의합니다. 애플리케이션의 제목 역할을 하는 <h1> 요소, 말하고 싶은 텍스트를 입력하는 <input> 필드 및 이 입력 텍스트를 입력하는데 사용할 <button>을 추가합니다. 마지막으로 이 모든 요소를 <form>으로 감쌉니다. 아직 입력 버튼은 기능이 없고 나중에 JavaScript를 사용하여 추가하겠습니다.
<head> 요소에는 HTML 파일의 메타데이터를 넣습니다. 아래쪽 <body> 요소에는 script.js 파일을 넣습니다. 이는 애플리케이션의 기능을 구현할 JavaScript 파일의 이름이 들어갑니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>JavaScript Text-to-Speech App</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="wrapper">
<h1>JavaScript Text-to-Speech App</h1>
<form id="form">
<input type="text" id="text-input" placeholder="Enter Text" />
<button type="submit" id="submit-button">Submit</button>
</form>
</div>
<script src="script.js"></script>
</body>
</html>이제 index.html 파일을 만들었으니 script.js를 만들어 보겠습니다.
2. 브라우저 호환성 확인
우리는 JavaScript TTS 애플리케이션을 만들기 위해 자바스크립트에 내장된 Web Speech API를 활용할 것 입니다. 이 API는 일부 브라우저와는 호환되지 않으므로 호환성을 확인해야 합니다. 두 가지 방법으로 체크해볼 수 있습니다.
첫 번째 방법은 사용할 운영체제와 caniuse.com에서 버전을 확인하는 것 입니다.
두 번째 방법은 간단한 조건문으로 코드상에서 검사할 수 있습니다.
'speechSynthesis' in window ? console.log("Web Speech API supported!") : console.log("Web Speech API not supported :-(")이는 if/else 구문의 축약버전으로 다음의 코드와 같은 기능입니다.
if ('speechSynthesis' in window){
console.log("Web Speech API supported!")
} else {
console.log("Web Speech API not supported :-(")
}지금 앱을 실행하여 브라우저의 콘솔을 확인하면 위의 메시지를 볼 수 있습니다. 또한 코드를 좀 더하여 HTML 요소에 이 정보를 전달하게 할 수도 있습니다.
3. JavaScript Text-to-Speech 테스트
다음으로 브라우저가 음성합성을 통해 말을 할 수 있는지 테스트하기위해 코드를 작성해 보겠습니다.
script.js 파일에 다음의 코드를 추가합니다.
'speechSynthesis' in window ? console.log("Web Speech API supported!") : console.log("Web Speech API not supported :-(")
const synth = window.speechSynthesis
let ourText = "안녕하세요"
const utterThis = new SpeechSynthesisUtterance(ourText)
synth.speak(utterThis)코드 설명
무슨일이 일어나고 있는건지 코드를 하나하나 살펴보겠습니다.
- const synth = window.speechSynthesis 구문에서 synth 변수를 만들어 SpeechSynthesis 객체의 인스턴스를 할당했습니다. 이는 JavaScript의 Web Speech API의 엔트리 포인트 입니다. 이 객체의 speak() 메소드는 궁국적으로 텍스트를 음성으로 변환합니다.
- let ourText = "안녕하세요" 구문은 ourText 변수에 말하고 싶은 문자열을 저장합니다.
- const utterThis = new SpeechSynthesisUtterance(ourText) 구문은 SpeechSynthesisUtterance 객체를 outText로 초기화하고 utterThis 변수에 넣습니다.
- 이 모든 것을 종합하면, synth.speak(utterThis) 구문으로 ourText 안에 있는 문자열을 말하게 합니다.
저장하고 브라우저를 새로고침하면 앱에서 "안녕하세요"라고 말을 할 것입니다.
4. 앱을 동적으로 만들기
우리의 코드는 애플리케이션이 Text-to-Speech 측면에서 어떻게 동직하는지 잘 설명하고 있지만 현재 애플리케이션은 ourText로 정의한 정적 텍스트만 음성으로 변환합니다. 이제 <form>을 활용해 음성으로 변환할 텍스트를 동적으로 바꿔보겠습니다.
const textInputField = document.querySelector("#text-input")
const form = document.querySelector("#form")
const utterThis = new SpeechSynthesisUtterance()
const synth = window.speechSynthesis
let ourText = ""
const checkBrowserCompatibility = () => {
"speechSynthesis" in window
? console.log("Web Speech API supported!")
: console.log("Web Speech API not supported :-(")
}
checkBrowserCompatibility()
form.onsubmit = (event) => {
event.preventDefault()
ourText = textInputField.value
utterThis.text = ourText
synth.speak(utterThis)
textInputField.value = ""
}See the Pen tts by shinyks (@shinyks) on CodePen.
5. 추가 기능
Web Speech API로 작업할 수 있는 많은 속성이 있습니다. 예를 들면 다음과 같습니다:
이 속성을 사용하여 필요에 따라 애플리케이션에 적용할 수 있습니다.
'dev > javascript' 카테고리의 다른 글
| [javascript] 자바스크립트 debounce 함수 지연 시키기 (3) | 2023.03.19 |
|---|---|
| [알고리즘] SHA 해시 알고리즘 이란? (3) | 2023.03.16 |
| [javascript] 자바스크립트 스크롤 캔버스 애니메이션 (애플 홈페이지) (5) | 2023.03.15 |
| [javascript] 자바스크립트 문자열 찾기 (5) | 2023.03.15 |
| [javascript] 자바스크립트 배열 중복 제거 (3) | 2023.03.14 |
댓글