Como adicionar texto para fala com JavaScript

Você não precisa de um framework para adicionar texto para fala (TTS) ao seu site. Seja com HTML e JavaScript puros, com um gerador de sites estáticos ou com uma página renderizada no servidor, adicionar voz ao seu conteúdo é simples.

Este guia explica como funciona a síntese de voz do navegador, os prós e contras de cada abordagem e como integrar o TTS2Go a qualquer projeto JavaScript.

Os navegadores modernos já vêm com a Web Speech API embutida. Com poucas linhas de JavaScript puro, você pode fazer isto:

```js

const utterance = new SpeechSynthesisUtterance("Hello world");

window.speechSynthesis.speak(utterance);

```

Não é preciso nenhum pacote npm, nenhuma chave de API e nenhum servidor. É gratuito e funciona offline.

A desvantagem está na qualidade e na consistência:

• As vozes costumam soar robóticas.
• A qualidade e a variedade de vozes mudam de uma plataforma para outra.
• O Chrome no Windows soa diferente do Safari no macOS.
• Não dá para garantir uma experiência de áudio consistente para todos os usuários.

O texto para fala com IA transformou o que é possível fazer com voz na web. Os modelos neurais de voz produzem áudio que soa genuinamente humano, com pausas, ênfase e ritmo naturais.

Uma opção é pré-gerar o áudio de todo o seu conteúdo e hospedar os arquivos em uma CDN.

Prós

• Reprodução instantânea para os usuários
• Mesma qualidade e mesma voz em todo lugar

Contras

• Você paga antecipadamente para gerar o áudio de todo o conteúdo, seja ele ouvido ou não
• O conteúdo precisa ser conhecido com antecedência
• Cada atualização exige gerar os arquivos de novo
• Os custos de armazenamento crescem junto com a sua biblioteca de conteúdo

A pré-geração funciona bem para catálogos pequenos e estáveis, mas fica cara e pouco flexível em grande escala.

Uma abordagem mais eficiente é gerar o áudio só quando alguém realmente clica em reproduzir.

Benefícios

• Você paga apenas pelo áudio que os usuários solicitam
• Conteúdo dinâmico e gerado por usuários é tratado naturalmente

O desafio

Sem nenhum controle, qualquer pessoa que visite o seu site poderia disparar gerações caras. Você precisa de uma forma de decidir o que é gerado e quando, para controlar seu orçamento e, ao mesmo tempo, oferecer TTS em todo lugar.

O TTS2Go adota uma abordagem híbrida que equilibra qualidade, custo e simplicidade.

1. Chave segura no cliente

Você adiciona o SDK ao seu site com uma chave de API de frontend. A chave usa bloqueio por domínio de origem e limitação de requisições, então pode ficar no seu código do lado do cliente com segurança. Ela é um mecanismo de identificação e de limitação de requisições, não um segredo.

1. Primeiro visitante: TTS do navegador na hora + geração em segundo plano

Quando a primeira pessoa clica em um botão de TTS em um conteúdo, ela ouve imediatamente a síntese de voz do navegador. Ao mesmo tempo, uma requisição de geração é enviada ao TTS2Go em segundo plano.

1. Aprovação e controle do orçamento

No painel do TTS2Go, você pode:

• Aprovar as requisições de geração manualmente, ou
• Configurar o sistema de aprovação por IA para aprovar automaticamente as requisições que atendam aos seus critérios.

Assim, você tem controle total sobre o seu orçamento de geração.

1. Próximos visitantes: áudio de IA premium direto da CDN

Depois que a requisição é aprovada e o áudio é gerado, todos os usuários que clicarem em TTS naquele mesmo conteúdo recebem áudio de IA de alta qualidade, com a voz que você escolheu, servido instantaneamente pela CDN do TTS2Go.

Na prática: o primeiro visitante ouve o TTS do navegador, os custos ficam sob controle graças à aprovação e todos os seguintes recebem áudio de IA premium.

Instale o pacote de JavaScript puro do TTS2Go usando o npm:

npm install @tts2go/vanilla

Se você não usa um bundler, pode carregá-lo de uma CDN com uma tag <script> e acessá-lo como window.TTS2Go.

Inicialize uma nova instância do TTS2Go com as credenciais do seu projeto:

import { TTS2Go } from "@tts2go/vanilla";

const tts = new TTS2Go({

apiKey: "your-api-key",

projectId: "your-project-id",

});

Chame tts.create() com o seu texto e um ID de voz para obter uma instância de TTS com controles de reprodução completos:

const instance = tts.create(
"Hello from TTS2Go in plain JavaScript!",)

A partir daqui, você pode explorar toda a API JavaScript do TTS2Go, incluindo:

• tts.getVoices() – lista as vozes disponíveis para o seu projeto