Aggiungere la sintesi vocale con JavaScript

Non ti serve un framework per aggiungere la sintesi vocale (TTS) al tuo sito. Che tu lavori con HTML e JavaScript puri, con un generatore di siti statici o con una pagina renderizzata lato server, dare voce ai tuoi contenuti è semplice.

Questa guida spiega come funziona la sintesi vocale del browser, i compromessi dei diversi approcci e come integrare TTS2Go in qualsiasi progetto JavaScript.

I browser moderni includono nativamente la Web Speech API. Con poche righe di JavaScript puro puoi:

```js

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

window.speechSynthesis.speak(utterance);

```

Niente pacchetti npm, niente API key, niente server. È gratis e funziona anche offline.

Il rovescio della medaglia sono qualità e coerenza:

• Le voci suonano spesso robotiche.
• Qualità e scelta delle voci cambiano da una piattaforma all’altra.
• Chrome su Windows ha un suono diverso da Safari su macOS.
• Non puoi garantire un’esperienza d’ascolto uniforme a tutti gli utenti.

La sintesi vocale basata sull’AI ha trasformato ciò che è possibile fare con la voce sul web. I modelli vocali neurali producono audio che suona davvero umano, con pause, enfasi e ritmo naturali.

Un’opzione è pregenerare l’audio per tutti i tuoi contenuti e ospitare i file su una CDN.

Pro

• Riproduzione immediata per gli utenti
• Stessa qualità e stessa voce ovunque

Contro

• Paghi in anticipo la generazione dell’audio per ogni contenuto, che venga ascoltato o meno
• I contenuti devono essere noti in anticipo
• Ogni aggiornamento richiede di rigenerare i file
• I costi di archiviazione crescono insieme alla tua libreria di contenuti

La pregenerazione funziona bene per cataloghi piccoli e stabili, ma diventa costosa e rigida su larga scala.

Un approccio più efficiente è generare l’audio solo quando qualcuno preme davvero play.

Vantaggi

• Paghi solo l’audio richiesto dagli utenti
• I contenuti dinamici e generati dagli utenti vengono gestiti in modo naturale

La sfida

Senza alcun filtro, chiunque visiti il tuo sito potrebbe avviare generazioni costose. Ti serve un modo per decidere cosa generare e quando, così da tenere sotto controllo il budget pur offrendo la sintesi vocale ovunque.

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

1. Chiave lato client sicura

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 e di rate limiting, non un segreto.

1. Primo visitatore: sintesi del browser immediata + generazione in background

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.

1. Approvazione e controllo del budget

Nella dashboard di TTS2Go puoi:

• Approvare manualmente le richieste di generazione, oppure
• Configurare il sistema di approvazione AI per approvare automaticamente le richieste che soddisfano i tuoi criteri.

Così hai il pieno controllo del tuo budget di generazione.

1. Visitatori successivi: audio AI premium dalla CDN

Una volta che una richiesta è stata approvata e generata, ogni utente che in seguito clicca sulla sintesi vocale per quello stesso contenuto riceve audio AI di alta qualità con la voce che hai scelto, servito all’istante dalla CDN di TTS2Go.

In pratica: il primo visitatore ottiene la sintesi del browser, i costi restano sotto controllo grazie all’approvazione e tutti quelli successivi ricevono audio AI premium.

Installa il pacchetto JavaScript vanilla di TTS2Go con npm:

npm install @tts2go/vanilla

Se non usi un bundler, puoi caricarlo da una CDN con un tag <script> e accedervi tramite window.TTS2Go.

Inizializza una nuova istanza di TTS2Go con le credenziali del tuo progetto:

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

const tts = new TTS2Go({

apiKey: "your-api-key",

projectId: "your-project-id",

});

Chiama tts.create() con il tuo testo e l’ID di una voce per ottenere un’istanza TTS con controlli di riproduzione completi:

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

Da qui puoi esplorare l’intera API JavaScript di TTS2Go, tra cui:

• tts.getVoices() – elenca le voci disponibili per il tuo progetto