Next.js TTS Library

A TypeScript library for text-to-speech synthesis using Microsoft Edge's neural voices, with support for word-level timing, multiple languages, and React integration.

Features

• 🌐 Support for 100+ neural voices across 60+ languages
• ⚛️ React hooks and components for easy integration
• 🎯 Word-level timing and highlighting
• 🎨 Customizable word display component
• 🔄 Streaming audio support
• 🎛️ Voice control (pitch, rate, volume)

Installation

npm install next-tts
# or
yarn add next-tts

Basic Usage

import { Communicate, Voices } from 'next-tts';

// Create a TTS instance
const tts = new Communicate(
  "Hello, world!",
  Voices.English.US.Female.Jenny,
  {
    rate: "+0%",
    volume: "+0%",
    pitch: "+0Hz"
  }
);

// Generate audio
const audioBlob = await tts.generateAudio();

React Integration

Using the Hook

import { useTTS } from 'next-tts';

function MyComponent() {
  const {
    isPlaying,
    currentWord,
    progress,
    isLoading,
    error,
    controls,
    timings,
    audioRef
  } = useTTS("Hello, this is a test of text to speech synthesis.");

  const { play, pause, stop, seek } = controls;

  // Use the controls and state in your component
}

Using the WordDisplay Component

import { useTTS, WordDisplay } from 'next-tts';

function MyComponent() {
  const ttsControls = useTTS("Hello, this is a test of text to speech synthesis.");

  return (
    <WordDisplay 
      controls={ttsControls}
      styles={{
        container: {/* custom styles */},
        word: {/* custom styles */},
        highlightedWord: {/* custom styles */}
      }}
    />
  );
}

Voice Selection

The library provides a comprehensive set of voices through the Voices object:

import { Voices } from 'next-tts';

// English US Female voice
const jennyVoice = Voices.English.US.Female.Jenny;

// Spanish Mexico Male voice
const jorgeVoice = Voices.Spanish.MX.Male.Jorge;

Types

TextTimings Interface

interface TextTimings {
  sentences: SentenceTiming[];
  totalDuration: number;
}

interface SentenceTiming {
  text: string;
  start: number;  // milliseconds
  end: number;    // milliseconds
  words: WordTiming[];
}

interface WordTiming {
  text: string;
  start: number;  // milliseconds
  end: number;    // milliseconds
}

Advanced Configuration

Custom Voice Settings

const tts = new Communicate(
  "Custom voice settings example",
  Voices.English.US.Female.Jenny,
  {
    rate: "+10%",    // Speed up by 10%
    volume: "+20%",  // Increase volume by 20%
    pitch: "+2Hz"    // Raise pitch by 2Hz
  }
);

WordDisplay Styling

<WordDisplay
  controls={ttsControls}
  styles={{
    container: {
      padding: '2rem',
      backgroundColor: '#f5f5f5'
    },
    word: {
      margin: '0 0.3rem',
      fontSize: '1.2rem'
    },
    highlightedWord: {
      backgroundColor: '#ffd700',
      borderRadius: '4px'
    },
    controls: {
      marginBottom: '1.5rem'
    },
    progressBar: {
      height: '6px',
      borderRadius: '3px'
    }
  }}
/>

License

MIT

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.