@vite-tts/react

React components and hooks for vite-plugin-tts.

Supports both pre-generated build-time audio files and on-demand client-side Web Speech API playback, with 100% WCAG 2.0 AA accessibility compliance.

📦 Installation

pnpm add @vite-tts/react
# or
npm install @vite-tts/react

🚀 Usage

1. Pre-generated Audio (src prop)

When paired with vite-plugin-tts, pass the path to the pre-rendered audio asset:

import { TTS } from '@vite-tts/react'

export function WelcomeBanner() {
  return (
    <TTS
      text="Welcome to our platform!"
      src="/tts-audio/welcome.wav"
      controls
      aria-label="Audio narration of welcome message"
    />
  )
}

2. Provider Context (<TTSProvider>)

Set global defaults across your React component tree:

import { TTSProvider, TTS } from '@vite-tts/react'

export function App() {
  return (
    <TTSProvider defaultLang="en-IN" defaultVoice="priya" outputDir="tts-audio">
      <main>
        <TTS text="नमस्ते!" lang="hi-IN" controls />
      </main>
    </TTSProvider>
  )
}

3. Headless Control with useTTS Hook

Build custom play/pause/stop user interfaces:

import { useTTS } from '@vite-tts/react'

export function CustomAudioPlayer({ text, src }: { text: string; src?: string }) {
  const { status, play, pause, stop, error } = useTTS({
    text,
    src,
    lang: 'en-IN',
    autoplay: false,
  })

  return (
    <div className="audio-controller">
      <button
        onClick={status === 'playing' ? pause : play}
        aria-label={status === 'playing' ? 'Pause playback' : 'Play audio narration'}
      >
        {status === 'playing' ? '⏸ Pause' : '▶ Play'}
      </button>
      <button onClick={stop} aria-label="Stop audio narration">
        ⏹ Stop
      </button>
      {error && <span role="alert" className="text-red-500">{error.message}</span>}
    </div>
  )
}

♿ Accessibility

• Generates semantic <audio> elements with keyboard accessible controls.
• Provides default aria-label attributes describing audio content.
• Respects browser autoplay and reduced-motion policies.

📄 License

MIT