https://github.com/code-spirit-369/text-to-speech-yt

This AI TTS web application allows you to convert any text into realistic, high-quality speech using the ElevenLabs API.
https://github.com/code-spirit-369/text-to-speech-yt

ai axios elevenlabs nextjs reactjs shadcn-ui tailwindcss text-to-speech tts typescript zustand

Last synced: about 1 month ago
JSON representation

This AI TTS web application allows you to convert any text into realistic, high-quality speech using the ElevenLabs API.

• Host: GitHub
• URL: https://github.com/code-spirit-369/text-to-speech-yt
• Owner: code-spirit-369
• Created: 2024-09-09T14:21:04.000Z (4 months ago)
• Default Branch: main
• Last Pushed: 2024-09-09T15:02:05.000Z (4 months ago)
• Last Synced: 2024-10-15T17:21:07.424Z (3 months ago)
• Topics: ai, axios, elevenlabs, nextjs, reactjs, shadcn-ui, tailwindcss, text-to-speech, tts, typescript, zustand
• Language: TypeScript
• Homepage:
• Size: 342 KB
• Stars: 0
• Watchers: 0
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        


  


    

      

    

  


  


    

    

    

    

  


  
AI Text-to-Speech (TTS) App




     Build this project step by step with a detailed tutorial on Code Spirit YouTube. 

    



## 📋 Table of Contents

1. 🎬 [Introduction](#introduction)

2. ⚙️ [Tech Stack](#tech-stack)

3. 🔋 [Features](#features)

4. 🚀 [Quick Start](#quick-start)

5. 🕸️ [Snippets (Code to Copy)](#snippets)

## 🚨 Tutorial

This repository contains the code corresponding to an in-depth tutorial available on our YouTube channel, Code Spirit.



## ⚙️ Tech Stack

- React.js

- Next.js

- Typescript

- TailwindCSS

- ElevenLabs API

- ShadCN

## 🎬 Introduction

Welcome to the AI Text-to-Speech app! This web application allows you to convert any entered text into realistic, high-quality speech using the ElevenLabs API. Choose from a variety of voices and download the generated audio directly for your personal or professional use.

## 🔋 Features

👉 **Text-to-Speech Conversion**: Enter any text and generate speech using multiple voice options provided by the ElevenLabs API.

👉 **Voice Options**: Choose from a variety of voices to suit your needs, whether it's for narration, storytelling, or other uses.

👉 **Audio Download**: Easily download the generated voice audio for offline use.

## 🚀 Quick Start

Follow these steps to set up the project locally on your machine.

**Prerequisites**

Make sure you have the following installed on your machine:

- [Git](https://git-scm.com/)

- [Node.js](https://nodejs.org/en)

- [npm](https://www.npmjs.com/) (Node Package Manager)

**Cloning the Repository**

```bash

git clone https://github.com/code-spirit-369/text-to-speech-yt

cd text-to-speech-yt

```

**Installation**

Install the project dependencies using npm:

```bash

npm install

```

**Set Up Environment Variables**

Create a new file named `.env.local` in the root of your project and add the following content:

```env

ELEVENLABS_API_KEY=

```

Get your API key from [ElevenLabs](https://elevenlabs.io/).

**Running the Project**

```bash

npm run dev

```

Open [http://localhost:3000](http://localhost:3000) in your browser to view the project.

## 🕸️ Code Snippets

/lib/utils

```typescript

import internal from "stream";

import { twMerge } from "tailwind-merge";

import { clsx, type ClassValue } from "clsx";

export function cn(...inputs: ClassValue[]) {

  return twMerge(clsx(inputs));

}

export async function streamToBuffer(

  stream: internal.Readable

): Promise {

  const chunks: Uint8Array[] = [];

  for await (const chunk of stream) {

    chunks.push(chunk);

  }

  return Buffer.concat(chunks);

}

```