speechly-widget

Speechly - AI Text-to-Speech Widget

Speechly is a React widget that provides text-to-speech functionality using the Speechify API. It allows users to:

• Record or upload audio samples to clone voices
• Select from available voices
• Convert text to speech using selected voices
• Read selected text on a webpage

Installation

npm install speechly-widget

Usage

Basic Usage

import { Speechly } from 'speechly-widget';

function App() {
  // The API key is required
  const apiKey = process.env.REACT_APP_SPEECHIFY_API_KEY;

  return (
    <div>
      <h1>My App</h1>
      <Speechly apiKey={apiKey} />
    </div>
  );
}

API Key Management

The Speechly component requires an API key to function. We recommend storing your API key in an environment variable rather than hardcoding it in your source code:

import { Speechly } from 'speechly-widget';

function App() {
  // Best practice: Store API key in environment variables
  const apiKey = process.env.REACT_APP_SPEECHIFY_API_KEY;

  return (
    <div>
      <h1>My App</h1>
      <Speechly apiKey={apiKey} />
    </div>
  );
}

For different frameworks, you might need to use different environment variable naming:

• Create React App: REACT_APP_SPEECHIFY_API_KEY
• Next.js: NEXT_PUBLIC_SPEECHIFY_API_KEY
• Vite: VITE_SPEECHIFY_API_KEY

Storing API keys in environment variables helps keep them secure and makes it easier to use different keys in development and production environments.

Features

• Voice Cloning: Record or upload audio samples to create custom voices
• Voice Selection: Choose from available voices, including your cloned voices
• Text-to-Speech: Convert text to speech using the selected voice
• Text Selection: Select text on the page and have it read aloud
• Customizable API Key: Provide your own Speechify API key as a prop

Props

Prop	Type	Required	Description
apiKey	string	Yes	Your Speechify API key. We recommend storing this in an environment variable.

Development

This project is built with React, TypeScript, and Vite.

Getting Started

• Clone the repository:

  git clone https://github.com/grandmastr/speechly.git
  cd speechly
  

• Install dependencies:

  npm install
  

• Start the development server:

  npm run dev
  

• Build the package:

  npm run build
  

Testing

The project uses Vitest for testing. To run the tests:

# Run tests once
npm test

# Run tests in watch mode
npm run test:watch

# Run tests with coverage
npm run test:coverage

Getting a Speechify API Key

To use this widget, you'll need a Speechify API key:

• Sign up for an account at Speechify API
• Navigate to your account settings or developer dashboard
• Generate a new API key
• Use this key in your application either as a prop or as an environment variable

Contributing

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

• Fork the repository
• Create your feature branch
• Commit your changes
• Push to the branch
• Open a Pull Request

License

This project is licensed under the MIT License - see the LICENSE file for details.