Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/geraldohomero/app-masters-elevenlabs-project
Text to Speech - Aplicação em Next.js que transforma texto em voz usando a API da ElevenLabs
https://github.com/geraldohomero/app-masters-elevenlabs-project
api elevenlabs-api nextjs nextjs14 text-to-speech typescript
Last synced: about 8 hours ago
JSON representation
Text to Speech - Aplicação em Next.js que transforma texto em voz usando a API da ElevenLabs
- Host: GitHub
- URL: https://github.com/geraldohomero/app-masters-elevenlabs-project
- Owner: geraldohomero
- Created: 2024-08-01T00:19:13.000Z (6 months ago)
- Default Branch: main
- Last Pushed: 2025-01-03T00:08:12.000Z (13 days ago)
- Last Synced: 2025-01-03T01:21:39.117Z (13 days ago)
- Topics: api, elevenlabs-api, nextjs, nextjs14, text-to-speech, typescript
- Language: TypeScript
- Homepage: https://app-masters-elevenlabs-project.vercel.app
- Size: 105 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
Projeto [Next.js](https://nextjs.org/) criado com [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
## Começando
Clone o repositório:
```bash
git clone https://github.com/geraldohomero/app-masters-elevenlabs-project.git
```
## Variáveis
Crie um arquivo `.env.local` na raiz do projeto e adicione:
```bash
NEXT_PUBLIC_API_KEY=
BLOB_READ_WRITE_TOKEN=
```
No terminal:
```bash
npm install
```
```bash
npm run dev
```
Abra [http://localhost:3000](http://localhost:3000)
# Projeto Texto em Voz
Este projeto é uma aplicação web que converte texto em voz utilizando a `API` da `ElevenLabs`. O projeto foi desenvolvido como parte do `Projeto App Masters` e utiliza diversas tecnologias modernas, incluindo React, TypeScript e [Ant Design](https://ant.design/).
## Funcionalidades
- **Entrada de Texto**: Permite ao usuário digitar o texto que deseja converter em voz.
- **Seleção de Voz**: O usuário pode selecionar diferentes vozes disponíveis para a conversão.
- **Filtro de vozes**: Podendo escolher por categoria, idade, gênero, sotaque e descrição.
- **Reprodução de Áudio**: O usuário pode ouvir a conversão do texto em voz diretamente na aplicação.
- **Download de Áudio**: O usuário pode baixar o áudio gerado em formato MP3.
## Tecnologias Utilizadas
- **React**: Biblioteca JavaScript para construção de interfaces de usuário.
- **TypeScript**: Superset do JavaScript que adiciona tipagem estática ao código.
- **Ant Design**: Biblioteca de componentes de interface de usuário para React.
- **API da ElevenLabs**: Serviço de conversão de texto em voz.
- **Vercel Blob Storage**: Serviço de armazenamento de arquivos para download.
- **Vercel**: Plataforma de deploy de aplicações web.
## Estrutura do Projeto
### Componentes Principais
- **textInput**: Componente para entrada de texto.
- **voiceSelect**: Componente para seleção de voz.
- **voiceDetails**: Componente que exibe detalhes da voz selecionada.
- **VoiceFilter.tsx**: Componente de filtro da lista de vozes
- **listaVozes**: Componente principal que integra os demais componentes e gerencia o estado da aplicação.
### Estrutura de diretórios
```markdown
.
├── app/
│ ├── components/
│ │ ├── listaVozes.tsx
│ │ ├── textInput.tsx
│ │ ├── VoiceFilter.tsx
│ │ └── voiceSelect.tsx
│ ├── hooks/
│ | └── useVoiceFilter.ts
│ ├── types/
│ | └── voice.d.ts
│ ├── favicon.ico
│ ├── globals.css
│ ├── layout.tsx
│ └── page.tsx
├── node_modules
├── pages/
│ └── api/
│ ├── get-audio.ts
│ └── voices.ts
├── public/
├── .env.local
├── .gitignore
├── next-env.d.ts
├── next.config.mjs
├── package-lock.json
├── package.json
├── README.md
└── tsconfig.json
```
***
