react text to speech

reaccionamiento de texto a voz

Un componente react.js fácil de usar que aprovecha la API del discurso web para convertir el texto al habla.

Características

• Convierte texto a discurso utilizando la API del discurso web.
• Resalta las palabras mientras se leen en voz alta. Ver:
  • Destacando el texto con gancho useSpeech .
  • Destacando el texto con componente Speech .
• Proporciona una API para manejar errores y eventos:
  • Manejo de errores con el gancho useSpeech .
  • Manejo de errores con componente Speech .
• Administra múltiples instancias del habla:
  • Múltiples instancias con gancho useSpeech .
  • Múltiples instancias con componente Speech .
• Totalmente personalizable para varios casos de uso:
  • Personalizar el gancho useSpeech .
  • Personalización del componente Speech .
• Superpone el límite de longitud de texto de la API del habla web, permitiendo la entrada de texto infinito.
• Detiene automáticamente las instancias del habla cuando el componente desmonta.

Instalación

Instale react-text-to-speech utilizando su Administrador de paquetes preferido:

 # 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

Uso

React-text-to-speech proporciona dos métodos principales para integrar la funcionalidad de texto a voz en sus aplicaciones React.js: el gancho useSpeech y el componente <Speech> .

useSpeech

Uso básico

 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 >
  ) ;
} 

Uso detallado

Para obtener más detalles sobre el uso del gancho useSpeech , consulte la documentación.

<Speech> componente

Uso básico

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

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

Uso detallado

Para obtener más detalles sobre el uso del componente <Speech> , consulte la documentación.

Manifestación

Mira la demostración en vivo para verlo en acción.

Documentación

Explore la documentación para comenzar rápidamente.

Contribuir

Muestre su ❤️ y apoye dando un On Github. También puede apoyar el proyecto votándolo y compartiéndolo en la búsqueda de productos. ¡Cualquier sugerencia es bienvenida! Eche un vistazo a la guía contribuyente.

Licencia

Este proyecto tiene licencia bajo la licencia MIT.

Explorar otras soluciones

Reaccione el discurso destacado, reaccione el texto al discurso al resaltar en tiempo real las palabras y oraciones que se hablan utilizando archivos de audio, API de texto a voz y API de síntesis de discurso web. También ofrece una API programática poderosa y flexible para muchos casos de uso.