react text to speech

react-text-to-disech

Un composant React.js facile à utiliser qui exploite l'API de discours Web pour convertir le texte en parole.

Caractéristiques

• Convertit le texte en parole à l'aide de l'API de discours Web.
• Met en évidence les mots lorsqu'ils sont lus à haute voix. Voir:
  • Mettez en surbrillance du texte avec un crochet useSpeech .
  • Mettez en surbrillance du texte avec la composante Speech .
• Fournit une API pour gérer les erreurs et les événements:
  • Gestion des erreurs avec le crochet useSpeech .
  • Gestion des erreurs avec composant Speech .
• Gère plusieurs instances de discours:
  • Plusieurs instances avec un crochet useSpeech .
  • Plusieurs instances avec composant Speech .
• Entièrement personnalisable pour divers cas d'utilisation:
  • Personnalisation du crochet useSpeech .
  • Personnalisation du composant Speech .
• Surmonte la limite de longueur de texte de l'API de la parole Web, permettant une entrée de texte infinie.
• Arrête automatiquement les instances de la parole lorsque le composant démoule.

Installation

Installez react-text-to-speech à l'aide de votre gestionnaire de package préféré:

 # Using npm:
npm install react-text-to-speech --save

# Using Yarn:
yarn add react-text-to-speech

# Using pnpm:
pnpm add react-text-to-speech

# Using Bun:
bun add react-text-to-speech

Usage

React-Text-to-Speech fournit deux méthodes principales pour intégrer la fonctionnalité de texte à dispection dans vos applications React.js: le crochet useSpeech et le composant <Speech> .

useSpeech

Utilisation de base

 import React from "react" ;
import { useSpeech } from "react-text-to-speech" ;

export default function App ( ) {
  const {
    Text , // Component that renders the processed text
    speechStatus , // Current speech status
    isInQueue , // Indicates if the speech is active or queued
    start , // Starts or queues the speech
    pause , // Pauses the speech
    stop , // Stops or removes the speech from the queue
  } = useSpeech ( { text : "This library is awesome!" } ) ;

  return (
    < div style = { { display : "flex" , flexDirection : "column" , rowGap : "1rem" } } >
      < Text />
      < div style = { { display : "flex" , columnGap : "0.5rem" } } >
        { speechStatus !== "started" ? < button onClick = { start } > Start </ button > : < button onClick = { pause } > Pause </ button > }
        < button onClick = { stop } > Stop </ button >
      </ div >
    </ div >
  ) ;
} 

Utilisation détaillée

Pour plus de détails sur l'utilisation du crochet useSpeech , reportez-vous à la documentation.

<Speech> Composant

Utilisation de base

 import React from "react" ;
import Speech from "react-text-to-speech" ;

export default function App ( ) {
  return < Speech text = "This library is awesome!" /> ;
} 

Utilisation détaillée

Pour plus de détails sur l'utilisation du composant <Speech> , reportez-vous à la documentation.

Démo

Découvrez la démo en direct pour le voir en action.

Documentation

Explorez la documentation pour commencer rapidement.

Contribuer

Montrez votre ❤️ et soutienz en donnant un sur github. Vous pouvez également soutenir le projet en le votant et en le partageant sur la chasse aux produits. Toutes les suggestions sont les bienvenues! Jetez un œil au guide contributeur.

Licence

Ce projet est autorisé sous la licence du MIT.

Explorez d'autres solutions

React Speech Highlight, réagissez du texte à la parole en mettant en évidence les mots et les phrases en temps réel qui sont prononcés à l'aide de fichiers audio, d'API de texte vocale et de synthèse de la parole Web. Il propose également une API programmée puissante et flexible pour de nombreux cas d'utilisation.