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
2. ⚙️ Tech Stack
3. 🔋 Features
4. 🚀 Quick Start
5. 🕸️ Snippets (Code to Copy)

🚨 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
• Node.js
• npm (Node Package Manager)

Cloning the Repository

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

Installation

Install the project dependencies using npm:

npm install

Set Up Environment Variables

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

ELEVENLABS_API_KEY=

Get your API key from ElevenLabs.

Running the Project

npm run dev

Open http://localhost:3000 in your browser to view the project.

🕸️ Code Snippets

/lib/utils

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<Buffer> {
  const chunks: Uint8Array[] = [];
  for await (const chunk of stream) {
    chunks.push(chunk);
  }
  return Buffer.concat(chunks);
}