From 72141626fca88c8d5120759b30ed83c03e50349a Mon Sep 17 00:00:00 2001 From: arvinxx Date: Sat, 18 Nov 2023 10:52:16 +0800 Subject: [PATCH 1/3] :memo: docs: add docs --- README.md | 9 +++++- .../text-to-speech-on-server/EdgeSpeechTTS.ts | 31 ++++++++++++++++++ .../text-to-speech-on-server/MicrosoftTTS.ts | 32 +++++++++++++++++++ .../text-to-speech-on-server/OpenAITTS.ts | 28 ++++++++++++++++ 4 files changed, 99 insertions(+), 1 deletion(-) create mode 100644 examples/text-to-speech-on-server/EdgeSpeechTTS.ts create mode 100644 examples/text-to-speech-on-server/MicrosoftTTS.ts create mode 100644 examples/text-to-speech-on-server/OpenAITTS.ts diff --git a/README.md b/README.md index f487031..d733346 100644 --- a/README.md +++ b/README.md @@ -6,7 +6,7 @@

Lobe TTS

-A high-quality & reliable TTS React Hooks library +A high-quality & reliable TTS library [![][npm-release-shield]][npm-release-link] [![][github-releasedate-shield]][github-releasedate-link] @@ -42,6 +42,9 @@ A high-quality & reliable TTS React Hooks library +## 📦 Usage + + ## 📦 Installation > \[!IMPORTANT]\ @@ -49,6 +52,10 @@ A high-quality & reliable TTS React Hooks library To install `@lobehub/tts`, run the following command: +```bash +$ pnpm i @lobehub/tts +``` + [![][bun-shield]][bun-link] ```bash diff --git a/examples/text-to-speech-on-server/EdgeSpeechTTS.ts b/examples/text-to-speech-on-server/EdgeSpeechTTS.ts new file mode 100644 index 0000000..8842b33 --- /dev/null +++ b/examples/text-to-speech-on-server/EdgeSpeechTTS.ts @@ -0,0 +1,31 @@ +import { EdgeSpeechPayload, EdgeSpeechTTS } from '@/core'; +import { Buffer } from 'node:buffer'; +import fs from 'node:fs'; +import path from 'node:path'; + +// 由于 nodejs 环境缺少 `WebSocket` 实例，因此我们需要将其 polyfill +// import WebSocket from 'ws'; +// global.WebSocket = WebSocket; + +// 实例化 EdgeSpeechTTS +const tts = new EdgeSpeechTTS({ locale: 'zh-CN' }); + +// 创建语音合成请求负载 +const payload: EdgeSpeechPayload = { + input: '这是一段语音演示', + options: { + voice: 'zh-CN-XiaoxiaoNeural', + }, +}; + +const speechFile = path.resolve('./speech.mp3'); + +// 调用 create 方法来合成语音 +async function main() { + const response = await tts.create(payload); + const mp3Buffer = Buffer.from(await response.arrayBuffer()); + + fs.writeFileSync(speechFile, mp3Buffer); +} + +main(); diff --git a/examples/text-to-speech-on-server/MicrosoftTTS.ts b/examples/text-to-speech-on-server/MicrosoftTTS.ts new file mode 100644 index 0000000..c8a450d --- /dev/null +++ b/examples/text-to-speech-on-server/MicrosoftTTS.ts @@ -0,0 +1,32 @@ +import { MicrosoftSpeechPayload, MicrosoftSpeechTTS } from '@/core'; +import { Buffer } from 'buffer'; +import fs from 'fs'; +import path from 'path'; + +// 由于 nodejs 环境缺少 `WebSocket` 实例，因此我们需要将其 polyfill +// import WebSocket from 'ws'; +// global.WebSocket = WebSocket; + +// 实例化 EdgeSpeechTTS +const tts = new MicrosoftSpeechTTS({ locale: 'zh-CN' }); + +// 创建语音合成请求负载 +const payload: MicrosoftSpeechPayload = { + input: '这是一段语音演示', + options: { + voice: 'yue-CN-XiaoMinNeural', + style: 'embarrassed', + }, +}; + +const speechFile = path.resolve('./speech.mp3'); + +// 调用 create 方法来合成语音 +async function main() { + const response = await tts.create(payload); + const mp3Buffer = Buffer.from(await response.arrayBuffer()); + + fs.writeFileSync(speechFile, mp3Buffer); +} + +main(); diff --git a/examples/text-to-speech-on-server/OpenAITTS.ts b/examples/text-to-speech-on-server/OpenAITTS.ts new file mode 100644 index 0000000..020dc92 --- /dev/null +++ b/examples/text-to-speech-on-server/OpenAITTS.ts @@ -0,0 +1,28 @@ +import { OpenAITTS, OpenAITTSPayload } from '@/core'; +import { Buffer } from 'node:buffer'; +import fs from 'node:fs'; +import path from 'node:path'; + +// 实例化 OpenAITTS +const tts = new OpenAITTS({ OPENAI_API_KEY: 'your-api-key' }); + +// 创建语音合成请求负载 +const payload: OpenAITTSPayload = { + input: '今天是美好的一天', + options: { + model: 'tts-1', + voice: 'alloy', + }, +}; + +const speechFile = path.resolve('./speech.mp3'); + +// 调用 create 方法来合成语音 +async function main() { + const response = await tts.create(payload); + const mp3Buffer = Buffer.from(await response.arrayBuffer()); + + fs.writeFileSync(speechFile, mp3Buffer); +} + +main(); From 4e3e99675e44d331173e0a663eb22e773ac868b4 Mon Sep 17 00:00:00 2001 From: Arvin Xu Date: Sat, 18 Nov 2023 11:16:10 +0800 Subject: [PATCH 2/3] Update README.md --- README.md | 69 +++++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 69 insertions(+) diff --git a/README.md b/README.md index d733346..1b6cc14 100644 --- a/README.md +++ b/README.md @@ -44,6 +44,75 @@ A high-quality & reliable TTS library ## 📦 Usage +### Generate Speech on server + +run the script below use Bun: `bun index.js` + +```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); +``` + + +https://github.com/lobehub/lobe-tts/assets/28616219/3ab68c5a-2745-442e-8d66-ca410192ace1 + + +> \[!IMPORTANT]\ +> **Run on Node.js** +> +> As the Node.js environment lacks the `WebSocket` instance, we need to polyfill WebSocket. This can be done by importing the ws package. + +```js +// import at the top of the file +import WebSocket from 'ws'; + +global.WebSocket = WebSocket; +``` + +### Use the React Component + +```tsx +import { AudioPlayer, AudioVisualizer, useAudioPlayer } from '@lobehub/tts/react'; + +export default () => { + const { ref, isLoading, ...audio } = useAudioPlayer(url); + + return ( + + + + + ); +}; +``` + + +https://github.com/lobehub/lobe-tts/assets/28616219/c2638383-314f-44c3-b358-8fbbd3028d61 + + ## 📦 Installation From 46e163989dfbb6860c576bafce2e1d1d3fc95cf3 Mon Sep 17 00:00:00 2001 From: arvinxx Date: Sat, 18 Nov 2023 11:17:06 +0800 Subject: [PATCH 3/3] :memo: docs: update docs --- README.md | 29 +---------------------------- 1 file changed, 1 insertion(+), 28 deletions(-) diff --git a/README.md b/README.md index 1b6cc14..0e59507 100644 --- a/README.md +++ b/README.md @@ -29,11 +29,9 @@ A high-quality & reliable TTS library #### TOC +- [📦 Usage](#-usage) - [📦 Installation](#-installation) - [Compile with Next.js](#compile-with-nextjs) -- [🛳 Self Hosting](#-self-hosting) - - [Deploy to Vercel](#deploy-to-vercel) - - [Environment Variable](#environment-variable) - [⌨️ Local Development](#️-local-development) - [🤝 Contributing](#-contributing) - [🔗 More Products](#-more-products) @@ -148,31 +146,6 @@ const nextConfig = { -## 🛳 Self Hosting - -If you want to deploy this service by yourself, you can follow the steps below. - -### Deploy to Vercel - -Click button below to deploy your private plugins' gateway. - -[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2Flobehub%2Flobe-tts&project-name=lobe-tts&repository-name=lobe-tts) - -### Environment Variable - -This project provides some additional configuration items set with environment variables: - -| Environment Variable | Description | Default | -| -------------------- | --------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------- | -| `OPENAI_API_KEY` | This is the API key you apply on the OpenAI account page | `sk-xxxxxx...xxxxxx` | -| `OPENAI_BASE_URL` | If you manually configure the OpenAI interface proxy, you can use this configuration item to override the default OpenAI API request base URL | `https://api.openai.com/v1` | - -
- -[![][back-to-top]](#readme-top) - -
- ## ⌨️ Local Development You can use Github Codespaces for online development: