Como adicionar texto para fala ao Svelte

O Svelte foi criado com foco em simplicidade e desempenho, e adicionar texto para fala (TTS) a um app Svelte pode ser igualmente simples.

Seja para tornar seu conteúdo mais acessível, criar uma experiência de leitura em áudio ou adicionar respostas por voz, o TTS pode ser integrado em minutos. Este guia explica como funciona a síntese de voz do navegador, os prós e contras das diferentes abordagens de TTS e como colocar o TTS2Go para funcionar no seu projeto Svelte.

Os navegadores modernos incluem a Web Speech API, que permite chamar window.speechSynthesis.speak() com um SpeechSynthesisUtterance para ler texto em voz alta.

Principais características:

• Sem dependências: tudo roda no navegador.
• Sem chaves de API nem chamadas ao servidor: não exige integração com backend.
• Sem custo: usa as vozes nativas do sistema.

Mas há desvantagens:

• Qualidade robótica e inconsistente: as vozes costumam soar sintéticas.
• Depende da plataforma: as vozes mudam entre Chrome e Firefox, macOS e Windows.
• Poucas opções de voz: menos idiomas e estilos do que o TTS moderno com IA.

Os modelos neurais de texto para fala produzem áudio com som natural, entonação e ritmo realistas. Eles oferecem muitos idiomas, sotaques e estilos de voz, o que os torna ideais para narrações e experiências de voz com qualidade profissional.

Prós e contras:

• Prós:
• Áudio natural e de alta qualidade
• Ampla cobertura de idiomas e vozes
• Som consistente em todos os dispositivos e navegadores
• Contras:
• Custo: você paga por caractere ou por segundo de áudio gerado.
• Chamadas de API: exige integração no servidor ou integração autenticada no cliente.

Isso levanta uma questão de design: como equilibrar a qualidade do áudio com os custos de geração e controlar quando o áudio é criado?

Uma abordagem é pré-gerar o áudio de todo o seu conteúdo e hospedá-lo em uma CDN.

Como funciona:

• Todo o conteúdo em texto é convertido em arquivos de áudio com antecedência.
• Esses arquivos são enviados e servidos a partir de uma CDN.
• Os usuários têm reprodução instantânea, sem espera pela geração.

Prós:

• Reprodução instantânea para todos os visitantes
• Áudio consistente e de alta qualidade
• Comportamento simples em tempo de execução (basta tocar um arquivo)

Contras:

• Você paga para gerar áudio de conteúdo que talvez nunca seja ouvido.
• Todo o conteúdo precisa ser conhecido com antecedência.
• Qualquer mudança no conteúdo exige gerar o áudio de novo.
• Os custos de armazenamento e de CDN crescem com o volume de conteúdo.

Para conteúdo dinâmico ou atualizado com frequência, isso logo fica caro e trabalhoso de operar.

Outra estratégia é a geração sob demanda (lazy), em que o áudio só é criado quando um usuário realmente clica em reproduzir.

Como funciona:

• Quando um usuário solicita o áudio de um conteúdo, você chama a API de TTS.
• O áudio gerado é armazenado ou mantido em cache.
• As próximas requisições reaproveitam o áudio em cache.

Prós:

• Muito mais econômico: você só paga pelo conteúdo que os usuários realmente ouvem.
• Suporta naturalmente conteúdo dinâmico e gerado por usuários.
• Reduz o desperdício de gerações para conteúdo que ninguém usa.

Desafios:

• Sem controles, qualquer pessoa poderia disparar gerações caras.
• Você precisa de uma forma de decidir qual conteúdo recebe áudio e quando.
• É preciso equilibrar a experiência do usuário (a espera inicial) com o controle do orçamento.

O TTS2Go combina o TTS do navegador e o TTS com IA para equilibrar qualidade, custo e simplicidade.

Ideias principais:

1. Chave segura no cliente

• Você adiciona o SDK do TTS2Go ao seu site com uma chave de API de frontend.

Instale o pacote Svelte do TTS2Go:

npm install @tts2go/svelte

O pacote funciona com o Svelte 5 e se integra naturalmente ao modelo de reatividade do Svelte.

Inicialize um cliente do TTS2Go com as credenciais do seu projeto. No Svelte, você pode criar o cliente diretamente em um componente ou em um módulo compartilhado.

import { createTTS2GoClient } from "@tts2go/svelte";

const client = createTTS2GoClient({

apiKey: "your-api-key",

projectId: "your-project-id",

});

• apiKey: a sua chave pública do TTS2Go, segura para usar no frontend.
• projectId: identifica qual projeto do TTS2Go será usado para geração, aprovações e análises.

Use createTTS para obter um store reativo com controles de reprodução e status.

import { createTTS2GoClient, createTTS } from "@tts2go/svelte";

const client = createTTS2GoClient({

apiKey: "your-api-key",

projectId: "your-project-id",

});

const VOICE_ID = "your-voice-id";

const text = "Hello from TTS2Go in Svelte!";

const tts = createTTS(client, text, VOICE_ID);

let status = $state("idle");

const unsubscribe = tts.status.subscribe((s) => (status = s));

function handleClick() {

if (status === "playing" || status === "fallback") {

tts.stop();

} else {

tts.play();

}

A partir daqui, você pode:

• Explorar a seleção de vozes para combinar com a sua marca ou tipo de conteúdo.
• Usar SSML para ter controle refinado sobre pronúncia, pausas e ênfase.
• Integrar a API de destaque de texto para sincronizar o texto com o áudio falado.

Para a documentação completa de Svelte e exemplos avançados, acesse:

• https://tts2go.com/docs/svelte