Como adicionar texto para fala ao React

O texto para fala está se tornando rapidamente um recurso indispensável na web moderna. Seja para acessibilidade, para aumentar o engajamento ou só para oferecer aos usuários outra forma de consumir conteúdo, adicionar voz ao seu projeto React é mais fácil do que parece. Este guia mostra como funciona a síntese de voz do navegador, os prós e contras de cada abordagem e como integrar o TTS2Go ao seu app React passo a passo.

Todo navegador moderno vem com a Web Speech API. Você pode chamar window.speechSynthesis.speak() com um SpeechSynthesisUtterance e ouvir o texto lido em voz alta sem nenhum serviço externo. É gratuito, não exige chave de API e roda inteiramente no cliente.

O problema é a qualidade. As vozes do navegador soam robóticas, variam entre sistemas operacionais e navegadores e oferecem pouca opção de escolha. O mesmo texto pode soar completamente diferente em dispositivos diferentes.

O texto para fala com IA mudou o jogo. Os modelos neurais de voz produzem áudio que soa impressionantemente humano, com entonação, ritmo e emoção naturais. Esses serviços oferecem dezenas de idiomas e centenas de vozes.

A contrapartida é que gerar esse áudio custa dinheiro e exige uma API, o que levanta uma questão importante: quando e como gerar esse áudio?

Uma abordagem é gerar todo o áudio com antecedência e servi-lo como arquivos estáticos. A vantagem é a reprodução instantânea, já que o áudio já está em uma CDN, e uma qualidade consistente todas as vezes.

A desvantagem é o custo. Você paga para gerar o áudio de todo o conteúdo, alguém ouvindo ou não. É preciso conhecer todo o conteúdo de antemão, o que descarta texto dinâmico. Cada alteração de conteúdo dispara um novo pipeline de geração, e os custos de armazenamento crescem junto com a sua biblioteca.

A alternativa é gerar o áudio apenas quando um usuário o solicita. Isso sai mais barato, já que você só paga pelo conteúdo que as pessoas realmente querem ouvir, e funciona com conteúdo dinâmico.

Mesmo assim, você ainda precisa proteger o seu orçamento de geração. Acesso irrestrito a uma API de TTS significa que qualquer pessoa poderia disparar gerações caras. Você precisa de uma forma de controlar quem recebe áudio de IA e quando.

O TTS2Go adota uma abordagem inteligente que equilibra qualidade, custo e simplicidade.

Você adiciona o SDK ao seu site com uma chave de API de frontend. A chave de API 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, não um segredo.

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.

Você pode entrar no painel do TTS2Go e aprovar essa requisiçã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, já que só paga pelo áudio que realmente quer.

Depois que a requisição é aprovada e o áudio é gerado, todos os usuários que clicarem em TTS naquele mesmo conteúdo ouvem áudio de IA de alta qualidade com a voz que você escolheu. O áudio fica em cache na CDN do TTS2Go, então a reprodução é instantânea.

Isso significa que o seu primeiro visitante tem uma experiência funcional com o TTS do navegador, seus custos de geração ficam sob controle graças à aprovação e todos os seguintes recebem áudio de IA premium sem custo extra.

Instale o pacote React do TTS2Go no diretório do seu projeto:

npm install @tts2go/react

O pacote é leve, com menos de 15 KB compactado com gzip, e não tem outras peer dependencies além do React.

Envolva a sua aplicação com o TTS2GoProvider na raiz da árvore de componentes. Passe a sua chave de API e o ID do projeto na configuração.

import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import { TTS2GoProvider } from "@tts2go/react";
import App from "./App";

const config = {
  apiKey: "your-api-key",
  projectId: "your-project-id",
};

createRoot(document.getElementById("root")!).render(
  <StrictMode>
    <TTS2GoProvider config={config}>
      <App />
    </TTS2GoProvider>
  </StrictMode>
);

Use o hook useTTS em qualquer componente para ter os controles de reproduzir, pausar e parar. Você também pode usar o TTSButton pronto para ter um ícone de alto-falante rapidamente.

import { TTSButton, useTTS } from "@tts2go/react";

const VOICE_ID = "your-voice-id";

export default function Article({ text }: { text: string }) {
  const { status, play, stop, pause } = useTTS(text, VOICE_ID);

  return (
    <div>
      <p>{text}</p>
      <TTSButton content={text} voiceId={VOICE_ID} />
      <button onClick={status === "playing" ? stop : play}>
        {status === "playing" ? "Stop" : "Play"}
      </button>
    </div>
  );
}

O primeiro usuário a clicar em reproduzir ouve o TTS do navegador enquanto uma requisição de geração é enviada ao seu painel do TTS2Go. Depois da aprovação, todos os próximos usuários ouvem o áudio de IA.

Explore a seleção de vozes, o suporte a SSML para ajustar a pronúncia e a API de destaque, que sincroniza o texto na tela com as palavras faladas.

Confira a documentação completa de React em tts2go.com/docs/react para ver padrões avançados e exemplos.