Aggiungere la sintesi vocale a React

La sintesi vocale sta diventando rapidamente una funzionalità irrinunciabile del web moderno. Che tu punti sull’accessibilità, sul coinvolgimento o voglia semplicemente offrire agli utenti un altro modo di fruire dei contenuti, aggiungere la voce al tuo progetto React è più facile di quanto pensi. Questa guida spiega come funziona la sintesi vocale del browser, i compromessi dei diversi approcci e come integrare TTS2Go nella tua app React passo dopo passo.

Ogni browser moderno include la Web Speech API. Puoi chiamare window.speechSynthesis.speak() con un SpeechSynthesisUtterance e ascoltare un testo letto ad alta voce senza alcun servizio esterno. È gratuita, non richiede API key e gira interamente sul client.

Il problema è la qualità. Le voci del browser suonano robotiche, cambiano da un sistema operativo e da un browser all’altro e la scelta è limitata. Lo stesso testo può suonare in modo completamente diverso su dispositivi diversi.

La sintesi vocale basata sull’AI ha cambiato le regole del gioco. I modelli vocali neurali producono audio sorprendentemente umano, con intonazione, ritmo ed emozione naturali. Questi servizi supportano decine di lingue e centinaia di voci.

Il compromesso è che generare questo audio costa e richiede un’API, il che solleva una domanda importante: quando e come generarlo?

Un approccio è generare tutto l’audio in anticipo e servirlo come file statici. Il vantaggio è la riproduzione immediata, visto che l’audio è già su una CDN, e una qualità costante ogni volta.

Lo svantaggio è il costo. Paghi la generazione dell’audio per ogni contenuto, che qualcuno lo ascolti o no. Devi conoscere in anticipo tutti i tuoi contenuti, il che esclude il testo dinamico. Ogni modifica dei contenuti fa ripartire una pipeline di generazione e i costi di archiviazione crescono con la tua libreria.

L’alternativa è generare l’audio solo quando un utente lo richiede. Costa meno, perché paghi solo i contenuti che le persone vogliono davvero ascoltare, e funziona con i contenuti dinamici.

Devi però proteggere il tuo budget di generazione. Un accesso senza restrizioni a un’API di sintesi vocale significa che chiunque potrebbe avviare generazioni costose. Ti serve un modo per controllare chi riceve l’audio AI e quando.

TTS2Go adotta un approccio intelligente che bilancia qualità, costi e semplicità.

Aggiungi l’SDK al tuo sito con una API key frontend. La chiave usa il blocco per dominio di provenienza e il rate limiting, quindi può stare tranquillamente nel tuo codice lato client. È un meccanismo di identificazione, non un segreto.

Quando la prima persona clicca su un pulsante di sintesi vocale per un contenuto, sente subito la sintesi vocale del browser. Nello stesso momento, una richiesta di generazione viene inviata a TTS2Go in background.

Puoi accedere alla dashboard di TTS2Go e approvare manualmente quella richiesta, oppure configurare il sistema di approvazione AI per approvare automaticamente le richieste che soddisfano i tuoi criteri. Così hai il pieno controllo del budget di generazione, perché paghi solo l’audio che vuoi davvero.

Una volta che una richiesta è stata approvata e generata, ogni utente che in seguito clicca sulla sintesi vocale per quello stesso contenuto ottiene una riproduzione audio AI di alta qualità con la voce che hai scelto. L’audio è in cache sulla CDN di TTS2Go, quindi la riproduzione è immediata.

In questo modo il tuo primo visitatore ha comunque un’esperienza funzionante con la sintesi del browser, i costi di generazione restano sotto controllo grazie all’approvazione e tutti quelli successivi ricevono audio AI premium senza costi aggiuntivi.

Installa il pacchetto React di TTS2Go nella directory del tuo progetto:

npm install @tts2go/react

Il pacchetto è leggero, meno di 15 KB compresso con gzip, e non ha peer dependency oltre a React.

Avvolgi la tua applicazione con il TTS2GoProvider alla radice dell’albero dei componenti. Passa la tua API key e l’ID del progetto nella configurazione.

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>
);

Usa l’hook useTTS in qualsiasi componente per ottenere i controlli di riproduzione, pausa e stop. Puoi anche inserire il componente già pronto TTSButton per avere subito un’icona dell’altoparlante.

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>
  );
}

Il primo utente che preme play sente la sintesi del browser, mentre una richiesta di generazione viene inviata alla tua dashboard di TTS2Go. Una volta approvata, tutti gli utenti successivi sentono l’audio AI.

Esplora la selezione delle voci, il supporto SSML per regolare con precisione la pronuncia e l’API di evidenziazione che sincronizza il testo sullo schermo con le parole pronunciate.

Consulta la documentazione completa di React su tts2go.com/docs/react per pattern avanzati ed esempi.