Tts-utility NPM

tts-utility

Lightweight Text-to-Speech Utility

A simple and lightweight Text-to-Speech (TTS) utility for web applications, compatible with React, Next.js, and vanilla JavaScript. This package utilizes the Web Speech API to convert text to speech with customizable options.

Installation
Usage
API
Examples
License

Installation

You can install the package via npm:

npm install tts-utility

Usage

Importing the Utility

To use the TTS utility in your project, import the functions as follows:

import { speakText, stopSpeaking } from 'tts-utility';

API

speakText(text: string, options?: object)

Converts the specified text to speech.

Parameters:
- text (string): The text to be spoken.
- options (object): Optional configuration for speech synthesis.
  - rate (number): The speaking rate (default is 1).
  - pitch (number): The pitch of the voice (default is 1).
  - lang (string): The language for speech (default is 'en-US').

stopSpeaking()

Stops any ongoing speech synthesis.

Examples

Using the Utility in a React Application

Here’s a basic example of how to integrate the TTS utility in a React app:

import React from 'react';
import { speakText, stopSpeaking } from 'tts-utility';

function App() {
  const handleSpeak = () => {
    speakText("Hello from your React app!", { rate: 1.2, pitch: 1, lang: 'en-US' });
  };

  const handleStop = () => {
    stopSpeaking();
  };

  return (
    <div>
      <h1>Text-to-Speech Utility Test</h1>
      <button onClick={handleSpeak}>Speak Text</button>
      <button onClick={handleStop}>Stop Speaking</button>
    </div>
  );
}

export default App;

Using the Utility in Vanilla JavaScript

If you're using plain JavaScript, you can integrate the utility as follows:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>TTS Utility Demo</title>
</head>
<body>
  <button id="speakButton">Speak Text</button>
  <button id="stopButton">Stop Speaking</button>

  <script src="path/to/tts-utility.js"></script>
  <script>
    document.getElementById('speakButton').addEventListener('click', () => {
      speakText("Hello from your Vanilla JS app!", { rate: 1.2, pitch: 1, lang: 'en-US' });
    });

    document.getElementById('stopButton').addEventListener('click', () => {
      stopSpeaking();
    });
  </script>
</body>
</html>