Como adicionar texto para fala ao Vue

Dar voz à sua aplicação Vue abre novas possibilidades de acessibilidade, engajamento e experiência do usuário. Seja um site de conteúdo, uma plataforma de e-learning ou um painel que lê alertas em voz alta, o texto para fala (TTS) permite que os usuários consumam seu conteúdo sem usar as mãos.

Este guia explica como funciona a síntese de voz do navegador, os prós e contras de cada abordagem e como configurar o TTS2Go no seu projeto Vue.

Todo navegador moderno inclui a Web Speech API. Com poucas linhas de JavaScript usando window.speechSynthesis.speak() e um SpeechSynthesisUtterance, você consegue ler texto em voz alta sem nenhum serviço externo nem chave de API.

Principais características:

• Roda inteiramente no cliente: não exige backend nem chamadas de API.
• Totalmente gratuito: sem cobrança por uso.
• Integração imediata: pouquíssimo JavaScript.

A principal desvantagem é a qualidade. As vozes do navegador costumam soar mecânicas, variam bastante entre sistemas operacionais e navegadores e oferecem pouca opção de escolha. O mesmo texto pode soar completamente diferente no Chrome e no Safari, ou no Windows e no macOS.

Os modelos de texto para fala com IA produzem áudio quase indistinguível de uma pessoa falando, com ritmo, ênfase e tom naturais. Esses serviços normalmente oferecem:

• Dezenas de idiomas
• Centenas de vozes diferentes
• Mais controle sobre estilo, ritmo e emoção

A contrapartida é que gerar esse áudio custa dinheiro e exige uma chamada de API. Isso levanta uma questão-chave: como controlar quando o áudio é gerado e quem paga por ele?

Uma abordagem é gerar todo o áudio com antecedência e servi-lo como arquivos estáticos a partir de uma CDN.

Prós:

• A reprodução é instantânea.
• A qualidade do áudio é a mesma para todos os ouvintes.

Contras:

• 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.
• Qualquer atualização de conteúdo obriga a rodar de novo o seu pipeline de geração.
• Os custos de armazenamento crescem de forma linear com o seu catálogo.

Isso pode funcionar para bibliotecas de conteúdo pequenas e estáveis, mas fica caro e pouco flexível em grande escala.

Uma estratégia mais eficiente é gerar o áudio apenas quando um usuário o solicita.

O TTS2Go equilibra qualidade, custo e simplicidade com um modelo híbrido.

1. Chave de frontend segura

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 + 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 ou rejeitar manualmente as requisições de geração, 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 instantâneo

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.

O resultado:

• O seu primeiro visitante tem uma experiência funcional com o TTS do navegador.
• Os seus custos ficam sob controle graças à aprovação e à limitação de requisições.
• Todos os seguintes recebem áudio de IA premium sem latência extra.

Adicione o pacote Vue do TTS2Go ao seu projeto:

npm install @tts2go/vue

O pacote é leve e funciona logo de cara com o Vue 3 e a Composition API.

Instale o TTS2GoPlugin ao criar o seu app Vue. Assim, o cliente do TTS2Go fica disponível para todos os componentes por meio da injeção de dependências do Vue.

import { createApp } from "vue";

import { TTS2GoPlugin } from "@tts2go/vue";

import App from "./App.vue";

const app = createApp(App);

app.use(TTS2GoPlugin, {

apiKey: "your-api-key",

projectId: "your-project-id",

});

Use o composable useTTS em qualquer componente para ter controles de reprodução reativos. Você também pode usar o componente TTSButton pronto para ter uma interface já montada.

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

const VOICE_ID = "your-voice-id";

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

const { status, play, stop, pause } = useTTS(text, VOICE_ID);

{{ text }}

{{ status.value === "playing" ? "Stop" : "Play" }}

Comportamento:

• O primeiro clique aciona o TTS do navegador e envia uma requisição de geração ao TTS2Go em segundo plano.
• Depois que a requisição é aprovada e gerada no seu painel, todos os usuários que clicarem em TTS naquele mesmo conteúdo recebem áudio de IA de alta qualidade em vez da voz do navegador.

A partir daqui, você pode explorar recursos mais avançados do TTS2Go para Vue:

• Seleção de vozes: escolha entre várias vozes e idiomas.
• Suporte a SSML: ajuste com precisão a pronúncia, a ênfase, as pausas e o ritmo.
• API de destaque: sincronize o texto na tela com as palavras faladas para melhorar a acessibilidade e a compreensão.

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

• tts2go.com/docs/vue