react text to speech

reação-text-to-fala

Um componente React.js fácil de usar que aproveita a API de fala da web para converter texto em fala.

Características

• Converte texto em fala usando a API de fala da web.
• Destaca as palavras à medida que são lidas em voz alta. Ver:
  • Destacando o texto com o gancho useSpeech .
  • Destacando texto com componente Speech .
• Fornece uma API para lidar com erros e eventos:
  • Manuseio de erros com o gancho useSpeech .
  • Manuseio de erro com componente Speech .
• Gerencia várias instâncias de fala:
  • Várias instâncias com o gancho useSpeech .
  • Várias instâncias com componente Speech .
• Totalmente personalizável para vários casos de uso:
  • Customizando o gancho useSpeech .
  • Personalizando o componente Speech .
• Supera o limite de comprimento do texto da API da API da Web, permitindo a entrada de texto infinito.
• Interrompe as instâncias de fala automaticamente quando o componente desmonta.

Instalação

Instale react-text-to-speech usando seu gerenciador de pacotes 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

O React-Text-to-Speal fornece dois métodos principais para integrar a funcionalidade de texto em fala em seus aplicativos react.js: o gancho useSpeech e o componente <Speech> .

Gancho 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 detalhado

Para mais detalhes sobre o uso do gancho useSpeech , consulte a documentação.

Componente <Speech>

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 detalhado

Para obter mais detalhes sobre o uso do componente <Speech> , consulte a documentação.

Demonstração

Confira a demonstração ao vivo para vê -lo em ação.

Documentação

Explore a documentação para começar rapidamente.

Contribuir

Mostre seu ❤️ e apoio dando um no Github. Você também pode suportar o projeto votando e compartilhando -o na busca de produtos. Quaisquer sugestões são bem -vindas! Dê uma olhada no guia contribuinte.

Licença

Este projeto está licenciado sob a licença do MIT.

Explore outras soluções

Reacione o destaque da fala, reaja texto ao discurso com destaque em tempo real As palavras e frases que estão sendo faladas usando arquivos de áudio, API de texto em fala e API de síntese de fala da web. Também oferece API programável e flexível e poderosa para muitos casos de uso.