lobe tts

葉TT

服務器和瀏覽器的高質量且可靠的TTS/STT庫

文檔·ChangElog·報告錯誤·請求功能

目錄

TOC

• 介紹
• ？用法
  • 在服務器上生成語音
  • 使用React組件
• ？安裝
  • 使用Next.js編譯
• ⌨️地方發展
• ？貢獻
• ？贊助
• ？鏈接
  • 更多產品
  • 設計資源
  • 發展資源

介紹

？ Lobe Chat支持文本對語音（TTS）和語音對文本（STT）技術，使我們的應用程序能夠將短信轉換為清晰的語音輸出，從而使用戶可以與我們的對話代理進行交互，就好像他們在與真實的人說話一樣。用戶可以從各種聲音中選擇與代理配對。

在實施此功能的過程中，我們發現市場上沒有令人滿意的TTS（文本到語音）前端庫。結果，我們投入了大量精力，包括數據轉換，音頻進度管理和語音可視化以及其他任務。

筆記

因此，我們決定完善我們的實施並將其設置為開源，希望協助希望實施TTS的開發人員。 @lobehub/tts是在打字稿中開發的高質量TTS工具包，它支持服務器端和瀏覽器中的用法。

• 服務器端：只有15行代碼，您就可以實現與OpenAI的TTS服務相當的高質量語音生成功能。它目前支持Edgespeechtts，Microsofttts，OpenAitts和OpenAistt。
• 瀏覽器側：它提供高質量的React鉤子和視覺音頻組件，支持加載，播放，暫停和拖動時間表等常見功能。此外，它提供了一套非常豐富的功能來調整音軌樣式。

？用法

在服務器上生成語音

運行下面的腳本使用bun： bun index.js

 // index.js
import { EdgeSpeechTTS } from '@lobehub/tts' ;
import { Buffer } from 'buffer' ;
import fs from 'fs' ;
import path from 'path' ;

// Instantiate EdgeSpeechTTS
const tts = new EdgeSpeechTTS ( { locale : 'en-US' } ) ;

// Create speech synthesis request payload
const payload = {
  input : 'This is a speech demonstration' ,
  options : {
    voice : 'en-US-GuyNeural' ,
  } ,
} ;

// Call create method to synthesize speech
const response = await tts . create ( payload ) ;

// generate speech file
const mp3Buffer = Buffer . from ( await response . arrayBuffer ( ) ) ;
const speechFile = path . resolve ( './speech.mp3' ) ;

fs . writeFileSync ( speechFile , mp3Buffer ) ;

音頻.mp4

重要的

在node.js上運行

由於Node.js環境缺少WebSocket實例，因此我們需要進行polyfill Websocket。這可以通過導入WS軟件包來完成。

 // import at the top of the file
import WebSocket from 'ws' ;

global . WebSocket = WebSocket ;

使用React組件

 import { AudioPlayer , AudioVisualizer , useAudioPlayer } from '@lobehub/tts/react' ;

export default ( ) => {
  const { ref , isLoading , ... audio } = useAudioPlayer ( url ) ;

  return (
    < Flexbox align = { 'center' } gap = { 8 } >
      < AudioPlayer audio = { audio } isLoading = { isLoading } style = { { width : '100%' } } />
      < AudioVisualizer audioRef = { ref } isLoading = { isLoading } />
    </ Flexbox >
  ) ;
} ;

Audio-Vis.mp4

？安裝

重要的

此軟件包僅是ESM。

要安裝@lobehub/tts ，請運行以下命令：

$ pnpm i @lobehub/tts

$ bun add @lobehub/tts

使用Next.js編譯

筆記

通過使用Next.js SSR正確工作，添加transpilePackages: ['@lobehub/tts'] next.config.js 。例如：

 const nextConfig = {
  transpilePackages : [ '@lobehub/tts' ] ,
} ; 

⌨️地方發展

您可以使用github代碼進行在線開發：

或克隆到本地發展：

$ git clone https://github.com/lobehub/lobe-tts.git
$ cd lobe-tts
$ bun install
$ bun dev

？貢獻

所有類型的貢獻都非常受歡迎，如果您有興趣貢獻代碼，請隨時查看我們的GitHub問題，以陷入困境，以向我們展示您的製作。

？贊助

每一個都重要，您的一次性捐贈在我們的支持銀河系中閃閃發光！您是射擊星，對我們的旅程產生迅速而明亮的影響。感謝您相信我們 - 您的慷慨指導我們執行我們的任務，一次一次出色的閃光。

？鏈接

更多產品

• ？ Lobe Chat-開源，可擴展的（函數調用），高性能聊天機器人框架。它支持您的專用Chatgpt/LLM Web應用程序的一單擊免費部署。
• ？ ️ Lobe主題- 穩定擴散WebUI，精美的接口設計，高度可自定義的UI和效率提高功能的現代主題。
• ？ Lobe Vidol-與Lobe Vidol一起體驗虛擬偶像創作的魔力，享受我們精美的UI設計的優雅，使用MMD舞蹈支持沿著跳舞，並進行平穩的對話。

設計資源

• ？ LOBE UI-用於構建AIGC Web應用程序的開源UI組件庫。
• ？ Lobe Icons-流行的AI / LLM模型品牌SVG徽標和圖標Collection。
• Lobe Charts-構建基於Recharts的React React現代圖表組件

發展資源

• ？ Lobe TTS-服務器和瀏覽器的高質量且可靠的TTS/STT庫
• ？ LOBE I18N- I18N（國際化）翻譯過程的自動化AI工具。

更多資源

---

執照

版權所有©2023 LobeHub。
該項目已獲得MIT許可。