JavaScript에 텍스트 음성 변환 추가하기

웹사이트에 텍스트 음성 변환(TTS)을 추가하는 데 프레임워크는 필요하지 않습니다. 순수 HTML과 JavaScript, 정적 사이트 생성기, 서버 렌더링 페이지 중 무엇을 사용하든 콘텐츠에 음성을 더하는 일은 간단합니다.

이 가이드에서는 브라우저 음성 합성의 작동 방식, 여러 접근 방식의 장단점, 그리고 어떤 JavaScript 프로젝트에든 TTS2Go를 연동하는 방법을 설명합니다.

최신 브라우저에는 Web Speech API가 기본으로 내장되어 있습니다. 순수 JavaScript 몇 줄이면 다음과 같이 할 수 있습니다.

```js

const utterance = new SpeechSynthesisUtterance("Hello world");

window.speechSynthesis.speak(utterance);

```

npm 패키지도, API 키도, 서버도 필요 없습니다. 무료이며 오프라인에서도 작동합니다.

단점은 품질과 일관성입니다.

• 음성이 기계적으로 들리는 경우가 많습니다.
• 플랫폼마다 음성 품질과 선택지가 다릅니다.
• Windows의 Chrome과 macOS의 Safari는 소리가 다릅니다.
• 모든 사용자에게 일관된 청취 경험을 보장할 수 없습니다.

AI 텍스트 음성 변환은 웹에서 음성으로 할 수 있는 일의 범위를 완전히 바꿔 놓았습니다. 신경망 음성 모델은 자연스러운 쉼, 강세, 리듬을 갖춘, 실제 사람처럼 들리는 오디오를 만들어 냅니다.

한 가지 방법은 모든 콘텐츠의 오디오를 미리 생성해 CDN에 파일로 호스팅하는 것입니다.

장점

• 사용자가 즉시 재생할 수 있습니다
• 어디서나 동일한 품질과 보이스를 제공합니다

단점

• 재생 여부와 상관없이 모든 콘텐츠의 오디오 생성 비용을 미리 지불해야 합니다
• 콘텐츠를 사전에 알고 있어야 합니다
• 콘텐츠를 수정하면 파일을 다시 생성해야 합니다
• 콘텐츠 라이브러리가 커질수록 저장 비용도 늘어납니다

사전 생성은 규모가 작고 변화가 적은 카탈로그에는 잘 맞지만, 규모가 커지면 비용이 많이 들고 유연성이 떨어집니다.

더 효율적인 방법은 누군가 실제로 재생 버튼을 클릭했을 때만 오디오를 생성하는 것입니다.

이점

• 사용자가 요청한 오디오에 대해서만 비용을 지불합니다
• 동적 콘텐츠와 사용자 생성 콘텐츠를 자연스럽게 처리할 수 있습니다

과제

아무런 통제 장치가 없으면 사이트를 방문하는 누구나 비용이 큰 생성 작업을 일으킬 수 있습니다. 무엇을 언제 생성할지 결정할 방법이 있어야 모든 곳에 TTS를 제공하면서도 예산을 관리할 수 있습니다.

TTS2Go는 품질, 비용, 단순함의 균형을 맞춘 하이브리드 방식을 사용합니다.

1. 안전한 클라이언트 측 키

프런트엔드 API 키로 사이트에 SDK를 추가합니다. 이 키는 요청 도메인 차단과 속도 제한을 사용하므로 클라이언트 측 코드에 안전하게 둘 수 있습니다. 비밀 값이 아니라 식별 및 속도 제한 수단입니다.

1. 첫 방문자: 즉시 브라우저 TTS + 백그라운드 생성

어떤 콘텐츠에서 처음으로 누군가 TTS 버튼을 클릭하면, 그 사람은 곧바로 브라우저 음성 합성으로 콘텐츠를 듣게 됩니다. 동시에 백그라운드에서 TTS2Go로 생성 요청이 전송됩니다.

1. 승인 및 예산 관리

TTS2Go 대시보드에서 다음을 할 수 있습니다.

• 생성 요청을 수동으로 승인하거나,
• 설정한 기준을 충족하는 요청을 자동 승인하도록 AI 승인 시스템을 구성합니다.

이를 통해 생성 예산을 완전히 통제할 수 있습니다.

1. 이후 방문자: CDN에서 제공되는 프리미엄 AI 오디오

요청이 승인되어 생성되고 나면, 같은 콘텐츠에서 TTS를 클릭하는 이후의 모든 사용자는 선택한 보이스로 된 고품질 AI 오디오를 TTS2Go의 CDN에서 즉시 제공받습니다.

실제로는 이렇습니다. 첫 방문자는 브라우저 TTS를 듣고, 비용은 승인을 통해 관리되며, 그 이후의 모든 사람은 프리미엄 AI 오디오를 듣게 됩니다.

npm으로 TTS2Go 바닐라 JavaScript 패키지를 설치합니다.

npm install @tts2go/vanilla

번들러를 사용하지 않는다면 CDN에서 <script> 태그로 불러와 window.TTS2Go로 접근할 수 있습니다.

프로젝트 자격 증명으로 새 TTS2Go 인스턴스를 초기화합니다.

import { TTS2Go } from "@tts2go/vanilla";

const tts = new TTS2Go({

apiKey: "your-api-key",

projectId: "your-project-id",

});

텍스트와 보이스 ID를 넣어 tts.create()를 호출하면 전체 재생 제어 기능을 갖춘 TTS 인스턴스를 얻을 수 있습니다.

const instance = tts.create(
"Hello from TTS2Go in plain JavaScript!",)

여기서부터 다음을 포함한 TTS2Go JavaScript API 전체를 살펴볼 수 있습니다.

• tts.getVoices() – 프로젝트에서 사용할 수 있는 보이스 목록 조회