Aggiungere la sintesi vocale a Vue

Dare una voce alla tua applicazione Vue apre nuove possibilità in termini di accessibilità, coinvolgimento ed esperienza utente. Che tu stia realizzando un sito di contenuti, una piattaforma di e-learning o una dashboard che legge gli avvisi ad alta voce, la sintesi vocale (TTS) permette agli utenti di fruire dei tuoi contenuti a mani libere.

Questa guida spiega come funziona la sintesi vocale del browser, i compromessi dei diversi approcci e come collegare TTS2Go al tuo progetto Vue.

Ogni browser moderno include la Web Speech API. Con poche righe di JavaScript che usano window.speechSynthesis.speak() e un SpeechSynthesisUtterance, puoi leggere un testo ad alta voce senza servizi esterni né API key.

Caratteristiche principali:

• Gira interamente sul client – nessun backend né chiamata API necessari.
• Completamente gratuita – nessuna fatturazione a consumo.
• Integrazione immediata – JavaScript ridotto al minimo.

Lo svantaggio principale è la qualità. Le voci del browser suonano spesso meccaniche, cambiano molto tra sistemi operativi e browser e la scelta è limitata. Lo stesso testo può suonare in modo completamente diverso su Chrome rispetto a Safari, o su Windows rispetto a macOS.

I modelli di sintesi vocale basati sull’AI producono audio quasi indistinguibile da quello di una persona reale, con ritmo, enfasi e tono naturali. Questi servizi offrono in genere:

• Decine di lingue
• Centinaia di voci uniche
• Più controllo su stile, ritmo ed emozione

Il compromesso è che generare questo audio costa e richiede una chiamata API. Il che pone una domanda chiave: come controllare quando viene generato l’audio e chi lo paga?

Un approccio è generare tutto l’audio in anticipo e servirlo come file statici da una CDN.

Pro:

• La riproduzione è immediata.
• La qualità audio è la stessa per ogni ascoltatore.

Contro:

• Paghi la generazione dell’audio per ogni contenuto, che qualcuno lo ascolti o no.
• Devi conoscere in anticipo tutti i tuoi contenuti.
• Ogni aggiornamento dei contenuti obbliga a rieseguire la pipeline di generazione.
• I costi di archiviazione crescono in modo lineare con il catalogo.

Può funzionare per librerie di contenuti piccole e stabili, ma diventa costoso e rigido su larga scala.

Una strategia più efficiente è generare l’audio solo quando un utente lo richiede.

TTS2Go bilancia qualità, costi e semplicità con un modello ibrido.

1. Chiave frontend 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 + 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 o rifiutare 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 immediato

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.

Il risultato:

• Il tuo primo visitatore ha comunque un’esperienza funzionante con la sintesi del browser.
• I tuoi costi restano sotto controllo grazie all’approvazione e al rate limiting.
• Tutti quelli successivi ricevono audio AI premium senza latenza aggiuntiva.

Aggiungi il pacchetto Vue di TTS2Go al tuo progetto:

npm install @tts2go/vue

Il pacchetto è leggero e funziona subito con Vue 3 e la Composition API.

Installa il TTS2GoPlugin quando crei la tua app Vue. In questo modo il client TTS2Go è disponibile in ogni componente tramite la dependency injection di 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",

});

Usa il composable useTTS in qualsiasi componente per ottenere controlli di riproduzione reattivi. Puoi anche usare il componente già pronto TTSButton per avere un’interfaccia pronta all’uso.

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:

• Il primo clic avvia la sintesi del browser e invia una richiesta di generazione a TTS2Go in background.
• Una volta che la richiesta è stata approvata e generata nella tua dashboard, tutti gli utenti successivi che cliccano sulla sintesi vocale per quello stesso contenuto ricevono audio AI di alta qualità al posto della voce del browser.

Da qui puoi esplorare le funzionalità più avanzate di TTS2Go per Vue:

• Selezione delle voci – scegli tra più voci e lingue.
• Supporto SSML – regola con precisione pronuncia, enfasi, pause e ritmo.
• API di evidenziazione – sincronizza il testo sullo schermo con le parole pronunciate per una migliore accessibilità e comprensione.

Per la documentazione completa di Vue ed esempi avanzati, visita:

• tts2go.com/docs/vue