TTS-Vue 웹 버전

✅ 온라인 데모(추천): https://xiaoying.work (🎁 매일 무료 10,000자 제공)

>

🚀 신제품: 전문 더빙 제품 / 더 안정적임 / 요금제 지원 / 더 많은 목소리 지원 / 작업 대기열 지원

🎤 마이크로소프트 음성 합성 도구, 웹 버전, Vue + ElementPlus + Vite로 제작.

호스팅 버전 / 온라인 체험

이 저장소는 오픈 소스 Web UI의 참조 구현입니다. 보다 안정적이고 강력한 기능의 서비스를 원하신다면 공식 호스팅 버전 사용을 권장합니다.

| 특징 | 자가 호스팅 (본 저장소) | XiaoYing.work (공식 호스팅) | | :----------------- | :------------------------------- | :----------------------------------------------- | | 배포 난이도 | 백엔드 직접 배포 및 환경 설정 필요 | 즉시 사용 가능, 배포 불필요 | | 무료 할당량 | 백엔드 설정에 따라 다름 | 매일 무료 10,000자 | | 안정성 | 로컬 네트워크 환경에 의존 | 고가용성 SLA, 전용선 가속 | | 기능 | 기본 음성 합성 | 계정 시스템, 작업 큐, 다양한 음색, API 지원 | | 유지보수 | 커뮤니티 유지보수 | 공식 지속 업데이트 및 유지관리 | | 적용 환경 | 학습, 개인 실습 | 프로덕션, 전문 성우, 고빈도 사용 |

웹사이트 예시

호스팅 웹사이트 인터페이스

https://xiaoying.work (🎁 매일 무료 10,000자)

https://web.tts88.top

신버전 인터페이스

구버전 인터페이스

기능 특징

• 🌐 완전 웹 기반, 데스크탑 앱 설치 불필요
• 🔊 마이크로소프트 다양한 음성합성 지원
• 🚀 TTS88 API 통합 지원
• 🆓 무료 TTS 호출 지원, 일일 무료 할당
• 🧠 OpenAI 텍스트 생성 지원
• 🌍 다국어 지원: 중국어, 영어, 스페인어
• 🔐 브라우저 지문 인식, 더 안전한 사용자 경험

최신 업데이트

인터페이스 재구성과 기능 강화 (v2.2.0)

• 📱 UI 재구성: 상단 고정 내비게이션, 텍스트 박스 스티키 모드 적용, 모바일 적응 최적화
• 🔤 SSML 강화: SSML 포맷터 추가, 설정 변경 시 자동으로 SSML 갱신
• 🎵 플레이어 최적화: 플레이어를 메인 화면에 통합, 오디오 재생 및 다운로드 경험 개선
• 🎞️ 자막 기능: 온라인 자막 생성 기능 추가, 콘텐츠 제작 효율 향상
• 🌓 테마 최적화: 다크 모드 인터페이스 개선, 글로벌 테마 전환 추가
• 🛠️ 고급 설정: 무료 TTS 서비스 화면 최적화, 속도 및 음조 설정 추가
• 💡 인터랙션 경험: 툴팁 기능 추가, 사용자 조작 안내 강화
• 🔄 의존성 업그레이드: Vue 3.5.11로 업데이트, ElementPlus 2.9.9로 업데이트
• 🌐 링크 업데이트: GitHub 저장소 주소 갱신

무료 TTS 서비스 통합 (v2.1.0)

• 🆕 무료 TTS 기능: API 키 없이 매일 무료 할당량 제공
• 👤 브라우저 지문 인식: 각 사용자별로 공정한 무료 할당량 보장
• 🔄 할당량 상태 표시: 남은 무료 문자 수 및 초기화 시간 실시간 표시
• 🌐 서버 상태 감지: 무료 TTS 서버 연결 상태 자동 감지
• 🛡️ 향상된 오류 처리: 더 친절한 오류 메시지와 상태 피드백
• 🎛️ 무료 TTS 설정 패널: 사용자가 설정과 할당량 정보를 쉽게 확인

인터페이스 및 사용자 경험 최적화 (v2.0.0)

• ✨ 설정 영역 최적화: 설정 패널 접기 지원, "음성 설정" 제목 클릭 시 확장/접기 가능
• 🔘 스마트 버튼 위치: "변환 시작" 버튼을 상단으로 이동, 스크롤 없이 클릭 가능
• 💬 상태 알림 강화: 직관적인 변환 상태 안내 문구 추가
• 🎨 시각 효과 개선: 버튼에 광효과 애니메이션 추가, 사용자 경험 강화
• 📱 반응형 레이아웃 최적화: 다양한 화면 크기에서의 표시 개선

이러한 개선으로 사용 효율이 크게 향상되었으며, 특히 기존 디자인에서 사용자가 페이지 하단까지 스크롤해야 "변환 시작" 버튼을 클릭할 수 있던 문제를 해결했습니다. 이제 사용자는 페이지 어디에서나 쉽게 변환을 시작할 수 있습니다.

개발 계획

📢 중요 공지: 데스크톱 버전 개발 중!

크로스 플랫폼 데스크톱 앱 버전을 개발 중이며, 더 많은 기능과 뛰어난 사용자 경험을 지원할 예정입니다.

추후 업데이트를 기대해 주세요. 최신 정보는 프로젝트 동향을 참고해 주시기 바랍니다.

빠른 시작

개발 환경

# 克隆仓库
git clone https://github.com/henryhu55/tts-web-vue.git
安装依赖
yarn install
启动开发服务器
yarn dev

생산 빌드

# 构建生产版本
yarn build
预览生产版本
yarn preview

배포

빌드가 완료되면 dist 디렉토리의 내용을 어떤 정적 웹 서버에든 배포하면 됩니다.

API 설정

본 웹 버전은 현재 무료 TTS 서비스, TTS88 API 및 OpenAI API를 지원합니다:

무료 TTS 서비스 설정

• 설정 페이지에서 "무료 TTS 서비스" 옵션을 찾습니다.
• 시스템은 기본적으로 무료 TTS 서버 주소를 구성합니다.
• 당일 남은 무료 한도와 초기화 시간을 확인할 수 있습니다.
• 각 브라우저 클라이언트는 독립적인 무료 한도를 가집니다.

TTS88 API 설정

• 설정 페이지에서 "서드파티 API URL" 설정 옵션을 찾습니다.
• 본인의 TTS88 API 주소를 입력합니다.
• API 키가 있다면 "TTS88 API 키" 필드에 입력합니다.

OpenAI API 설정

• 설정 페이지에서 OpenAI 설정 옵션을 찾습니다.
• 본인의 OpenAI API 키를 입력합니다.
• 사용할 모델을 선택합니다(기본값은 gpt-3.5-turbo).
• 자체 호스팅 또는 프록시를 사용하는 경우, 사용자 지정 API Base URL을 설정할 수 있습니다.

주의 사항

• 데이터는 브라우저 로컬 저장소에만 저장되며, 새로고침이나 캐시 삭제가 다른 사용자에게 영향을 주지 않습니다.
• 변환된 오디오 파일은 브라우저에서 바로 재생하거나 로컬에 다운로드할 수 있습니다.
• 무료 TTS 서비스는 일일 사용 한도가 있으며, 초과 시 다음 날 초기화를 기다려야 합니다.

기술 스택

• Vue 3.2
• Pinia
• ElementPlus
• Vite

라이선스

MIT 라이선스

시작하기

• 프로젝트 소개
• 설치 및 실행
• 기능 소개
• 자주 묻는 질문
• 업데이트 로그

주의

이 소프트웨어 및 코드는 개인 학습 테스트 용도로만 사용되며, 다운로드 후 24시간 이내 삭제해야 하며, 상업적 용도로 사용할 수 없습니다. 그렇지 않을 경우 모든 책임은 사용자 본인에게 있습니다. 어떠한 불법 사용으로 인한 법적 책임은 저와 무관합니다. 이 소프트웨어는 절대 유료가 아니며, 사용 전에 추가 비용을 지불했거나 소스 코드 또는 완제품 소프트웨어를 유료로 구입했다면 반드시 사기당한 것입니다!

복사 시 출처를 명시해 주세요. 그룹 초대, 개인 메시지 등으로 소프트웨어 저장소, 다운로드 주소 및 설치 파일을 얻도록 유도하는 행위를 금지합니다.

의견 및 문제 피드백, 버전 출시 페이 그룹:

【tts-web-vue 문제 피드백 그룹1】279895662

--- Tranlated By Open Ai Tx | Last indexed: 2026-01-04 ---