lobehub/lobe-tts

Lobe TTS – JavaScript/TypeScript용 텍스트 음성 변환 및 음성 텍스트 변환

이것이 무엇인가

• 텍스트를 음성 오디오로 변환하고 음성 오디오를 텍스트로 전사할 수 있는 작은 순수 JavaScript 라이브러리(@lobehub/tts)입니다.
• 서버(Node.js / Bun)와 브라우저 모두에서 작동하며, 빠른 통합을 위한 기성 React 훅과 UI 컴포넌트가 포함되어 있습니다.

왜 사용해야 하는가

• 통합 API – 동일한 함수 호출이 여러 공급자(Microsoft Edge, Microsoft Speech, OpenAI 또는 브라우저 내장 음성 합성)와 함께 작동합니다. 앱 코드를 변경하지 않고 백엔드를 전환할 수 있습니다.
• 서버 측 생성 – 백엔드에서 MP3 파일을 생성하여 클라이언트에 제공할 수 있습니다. 사전 렌더링된 팟캐스트, 음성 알림 또는 접근성 기능에 유용합니다.
• 클라이언트 측 재생 – React 앱에서 즉시 음성을 재생할 수 있으며, 진행 상황을 표시하고 일시 중지를 허용하며 다운로드 버튼을 제공하는 내장 <AudioPlayer>가 있습니다.
• 긴 텍스트 처리 – 라이브러리는 오디오를 스트리밍하므로 긴 구절이 전체 파일이 준비되기 전에 재생을 시작하여 더 부드러운 UX를 제공합니다.
• AI 친화적 문서 – skills.md 및 llms.txt 파일을 게시하여 AI 코딩 어시스턴트(Claude, Cursor, Copilot 등)가 API를 읽고 코드를 자동 생성할 수 있습니다.

시작하는 방법

# 핵심 패키지 설치(ESM 전용)
pnpm i @lobehub/tts

• React의 경우 @lobehub/ui, react@^19, react-dom@^19도 필요합니다.

서버 측 예제(Bun / Node 22+)

import { EdgeSpeechTTS } from '@lobehub/tts';
import fs from 'node:fs';

const tts = new EdgeSpeechTTS({ locale: 'en-US' });
const response = await tts.create({
  input: 'This is a speech demonstration',
  options: { voice: 'en-US-GuyNeural' }
});
fs.writeFileSync('./speech.mp3', Buffer.from(await response.arrayBuffer()));

(이전 Node에서 실행하는 경우 전역 WebSocket 구현을 제공하세요.)

React 사용법

import { AudioPlayer, useEdgeSpeech } from '@lobehub/tts/react';
import { Button, Flexbox } from '@lobehub/ui';

export default function Demo() {
  const { isGlobalLoading, start, stop, audio } = useEdgeSpeech('Hello from Lobe TTS', {
    options: { voice: 'en-US-GuyNeural' }
  });
  return (
    <Flexbox gap={8}>
      <Button loading={isGlobalLoading} ? stop : start}>
        Speak
      </Button>
      <AudioPlayer audio={audio} isLoading={isGlobalLoading} />
    </Flexbox>
  );
}

필요한 경우 Next.js 구성에 transpilePackages: ['@lobehub/tts']를 추가하세요.

패키지 구성

패키지	용도
@lobehub/tts	핵심 API – 음성 생성 또는 오디오 전사. 모든 JS 환경에서 사용 가능.
@lobehub/tts/server	자체 API 경로를 통해 OpenAI 음성/전사를 프록시하는 헬퍼.
@lobehub/tts/react	React 훅(useEdgeSpeech, useOpenAISpeech 등) 및 <AudioPlayer> 컴포넌트.

문서 및 커뮤니티

• 전체 문서, 라이브 데모 및 API 참조는 tts.lobehub.com 에 있습니다.
• 이 프로젝트는 오픈 소스(MIT)이며 GitHub Issues 및 Pull Requests를 통한 기여를 환영합니다.
• OpenCollective를 통해 후원할 수 있습니다.

누가 혜택을 받을 수 있는가

• 음성 피드백이나 음성 명령이 필요한 웹 앱을 구축하는 프런트엔드 개발자.
• 주문형 오디오 파일을 생성해야 하는 백엔드 서비스(예: 자동 안내, 접근성 도구).
• 이미 Lobe의 UI 컴포넌트 라이브러리를 사용하고 있으며 일관된 플러그 앤 플레이 음성 솔루션을 원하는 팀.

---

위의 모든 세부 사항은 저장소의 README에서 직접 가져온 것이며 추가 기능은 추론되지 않았습니다.