How to Add Text-to-Speech to Your Website in 5 Minutes

Adding text-to-speech to your website used to require complex API integrations, audio hosting, and player UI development. With TTS.ai's embeddable widget, you can add a "Listen" button to any page with a single line of code.

The Quick Way: TTS Widget

Add this script tag to any page where you want a listen button:

<script src="https://tts.ai/widget/tts.js"
  data-pk="pk-tts-YOUR_KEY"
  data-text="auto"
  data-voice="af_bella"></script>

The data-text="auto" attribute automatically reads the page content. The widget renders a play button that streams audio as the user listens — no pre-generation needed.

Configuration Options

• data-text — Set to "auto" to read page content, or provide specific text
• data-voice — Choose from hundreds of voices across 20+ models
• data-model — Select the TTS model (default: kokoro)
• data-position — Widget placement: "bottom-right", "bottom-left", "inline"
• data-theme — "light" or "dark" to match your site

The API Way: Full Control

For custom integrations, use the TTS.ai API directly. Here's a minimal example with JavaScript:

const response = await fetch('https://api.tts.ai/v1/tts/', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
    'Authorization': 'Bearer sk-tts-YOUR_KEY'
  },
  body: JSON.stringify({
    text: 'Hello from TTS.ai!',
    model: 'kokoro',
    voice: 'af_bella'
  })
});
const audio = await response.blob();
const url = URL.createObjectURL(audio);
new Audio(url).play();

Using the JavaScript SDK

For production applications, use our SDK for automatic retries, error handling, and TypeScript support:

npm install @ttsainpm/ttsai

import { TTSClient } from '@ttsainpm/ttsai';

const client = new TTSClient('sk-tts-YOUR_KEY');
const audio = await client.generate({
  text: 'Hello from TTS.ai!',
  model: 'kokoro',
  voice: 'af_bella'
});
// audio is a Buffer/Blob you can play or save

Use Cases

• Blogs and articles — Let readers listen instead of read, increasing engagement and accessibility
• Documentation — Audio walkthroughs for technical docs
• E-commerce — Product description audio for accessibility
• E-learning — Narrated course content without recording studios
• Accessibility — WCAG compliance with audio alternatives for text content

Free Tier

TTS.ai offers 15,000 free characters when you sign up — enough to voice dozens of articles. Free-tier models like Kokoro require no account at all. View pricing for higher volumes.