vite-plugin-tts

AI Text-to-Speech for Vite — transforms <tts> HTML tags into pre-generated audio files at build and dev time.

Works with Vanilla HTML, React, Vue, SolidJS, Svelte, and any modern web framework.

📦 Installation

pnpm add -D vite-plugin-tts @vite-tts/adapter-sarvam
# or
pnpm add -D vite-plugin-tts @vite-tts/adapter-openai

🚀 Quick Setup

Configure your vite.config.ts:

import { defineConfig } from 'vite'
import { tts } from 'vite-plugin-tts'
import { sarvam } from '@vite-tts/adapter-sarvam'

export default defineConfig({
  plugins: [
    tts({
      adapter: sarvam(), // reads SARVAM_API_KEY from environment
      defaultLang: 'en-IN',
      defaultVoice: 'priya',
      defaultFormat: 'wav',
      outputDir: 'tts-audio',
    }),
  ],
})

Add your API key to .env.local:

echo "SARVAM_API_KEY=your_sarvam_api_key_here" >> .env.local

🎙️ Usage

Write <tts> tags directly in your HTML templates:

<!-- Tag with body text -->
<tts lang="en-IN" voice="priya" controls>
  Welcome to our website!
</tts>

<!-- Hindi speech with Bulbul v3 -->
<tts lang="hi-IN" voice="aditya" controls>
  नमस्ते! हमारी वेबसाइट में आपका स्वागत है।
</tts>

<!-- Self-closing tag -->
<tts text="Click play to listen to this announcement." lang="en-IN" controls />

During build (vite build), these are transformed into pre-rendered <audio> tags pointing to optimized static audio assets (dist/tts-audio/[hash].wav), with zero runtime API credentials required.

During development (vite dev), the plugin serves generated audio dynamically through Vite's dev server middleware.

⚙️ Plugin Options

| Option | Type | Default | Description | |---|---|---|---| | adapter | TTSAdapter | Required | The TTS adapter instance (e.g. sarvam() or openai()) | | defaultLang | string | 'en-US' | Default language code (e.g. 'en-IN', 'hi-IN') | | defaultVoice | string | Provider default | Default voice name | | defaultFormat | 'wav' \| 'mp3' \| 'ogg' | 'wav' | Default audio file format | | outputDir | string | 'tts-audio' | Directory inside dist/ where audio assets are placed | | cacheDir | string | '.tts-cache' | Cache directory for generated audio and manifests | | quiet | boolean | false | Suppress info logging |

📚 Related Packages

• @vite-tts/core — Core parsing, hashing, and cache engine
• @vite-tts/adapter-sarvam — Sarvam AI (Bulbul v3) adapter
• @vite-tts/adapter-openai — OpenAI TTS adapter
• @vite-tts/cli — Interactive configuration wizard
• @vite-tts/react — React <TTS> component & useTTS hook
• @vite-tts/vue — Vue 3 <TTS> component & useTTS composable
• @vite-tts/solid — SolidJS reactive <TTS> component

📄 License

MIT