Adding Text to Speech to Svelte

Svelte is built around simplicity and performance, and adding text-to-speech (TTS) to a Svelte app should be just as straightforward.

Whether you want to make your content more accessible, build an audio reading experience, or add voice feedback to an interactive app, TTS can be integrated in minutes.

This guide covers how browser speech works, the trade-offs of different generation approaches, and how to get TTS2Go running in your Svelte project.

Modern browsers include the Web Speech API, which lets you call:

```ts

window.speechSynthesis.speak(

new SpeechSynthesisUtterance("Your text here")

);

Neural text-to-speech models have dramatically raised the bar for voice quality.

AI-generated voices:

• Sound natural, with realistic intonation and pacing
• Support many languages and accents
• Offer multiple styles (conversational, narrative, energetic, etc.)

However, generating AI audio requires an API call, which leads to a key design decision:

Should you pre-generate your audio or generate it on demand?

With pre-generation, you convert all your text to audio files ahead of time and host them on a CDN.

Pros:

• Instant playback, no loading delay
• Consistent audio quality for all users

Cons:

• You pay to generate audio that may never be played
• All content must be known in advance
• Dynamic or user-generated text is not supported
• Any content change triggers a regeneration step
• Storage costs scale with content volume

Pre-generation works best for static, high-value content where you know audio will be used heavily.

With on-demand generation, audio is created only when a user clicks play.

Pros:

• Far more cost-effective: you only pay for what users actually listen to
• Naturally supports dynamic and user-generated content

Cons:

• Calling a TTS API directly from the frontend exposes your API key
• You need a backend proxy endpoint
• That backend must be protected with rate limiting and authentication

You can easily end up spending more time building infrastructure to protect an API key than building your actual product.

TTS2Go starts with what is already available for free: the browser's native speech synthesis.

• By default, the SDK uses the browser's built-in voices so every user can hear content spoken aloud without any account or API key.
• When a user signs up for TTS2Go, the SDK seamlessly switches to AI-generated voices.
• Authentication is handled through the user's TTS2Go account, not through API keys in your code.

Key benefits:

• Nothing sensitive to expose in your frontend
• No backend proxy to build or maintain
• You ship browser TTS on day one
• Premium AI voices become available as users opt in

Install the TTS2Go Svelte package:

```bash

npm install @tts2go/svelte

Initialize a TTS2Go client with your project credentials. In Svelte you can create the client directly in a component or in a shared module.

```ts

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

const client = createTTS2GoClient({

apiKey: "YOURAPIKEY",

projectId: "YOURPROJECTID",

});

```

Use your actual TTS2Go API key and project ID here. You can share this client across components if needed.

Use createTTS to get a reactive store with playback controls. You can also use createTTSButton to mount a pre-built speaker button to any DOM element.

```svelte

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

const client = createTTS2GoClient({

apiKey: "YOURAPIKEY",

projectId: "YOURPROJECTID",

});

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

}

}

{text}

{#if status === "playing" || status === "fallback"}

Stop

{:else}

Play

{/if}

From here you can:

• Explore voice selection to match your brand or content style
• Use SSML for fine-grained pronunciation, emphasis, and pacing control
• Integrate the text highlighting API to sync spoken words with on-screen text

For complete Svelte documentation and advanced examples, visit:

tts2go.com/docs/svelte