react text to speech

React-Text-to-Speech

Eine benutzerfreundliche React.js-Komponente, die die Web-Sprach-API nutzt, um Text in Sprache umzuwandeln.

Merkmale

• Konvertiert Text mit der Web -Sprach -API in die Sprache.
• Markiert Wörter, wenn sie laut gelesen werden. Sehen:
  • Hervorhebung von Text mit useSpeech -Hook.
  • Hervorheben von Text mit Speech .
• Bietet eine API zum Umgang mit Fehlern und Ereignissen:
  • Fehlerbehandlung mit useSpeech -Hook.
  • Fehlerbehandlung mit Speech .
• Verwaltet mehrere Sprachinstanzen:
  • Mehrere Fälle mit useSpeech -Hook.
  • Mehrere Instanzen mit Speech .
• Vollständig anpassbar für verschiedene Anwendungsfälle:
  • Anpassen useSpeech Hook.
  • Anpassen der Speech .
• Überwindet die Textlängengrenze der Web -Speech -API und ermöglicht unendliche Texteingabe.
• Stoppt automatisch Sprachinstanzen, wenn sich die Komponente entfaltet.

Installation

Installieren Sie react-text-to-speech mit Ihrem bevorzugten Paketmanager:

 # 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

Verwendung

React-Text-to-Speech bietet zwei primäre Methoden, um Text-to-Speech-Funktionalität in Ihre React.js-Anwendungen zu integrieren: den useSpeech Hook und die <Speech> -Komponente.

useSpeech -Haken

Grundnutzung

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

Detaillierte Verwendung

Weitere Informationen zur Verwendung des useSpeech -Hooks finden Sie in der Dokumentation.

<Speech> Ponents

Grundnutzung

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

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

Detaillierte Verwendung

Weitere Informationen zur Verwendung der <Speech> -Komponente finden Sie in der Dokumentation.

Demo

Schauen Sie sich die Live -Demo an, um sie in Aktion zu sehen.

Dokumentation

Erkunden Sie die Dokumentation, um schnell loszulegen.

Beitragen

Zeigen Sie Ihre ❤️ und Unterstützung, indem Sie ein Github geben. Sie können das Projekt auch unterstützen, indem Sie es auf der Produktjagd verbessern und teilen. Vorschläge sind willkommen! Schauen Sie sich den beitragenden Leitfaden an.

Lizenz

Dieses Projekt ist unter der MIT -Lizenz lizenziert.

Erforschen Sie andere Lösungen

React Speech Highlight, reagieren Sie den Text mit der Sprache mit hervorgehobenen Echtzeits der Wörter und Sätze, die mit Audio-Dateien, API von Text-to-Speech und Web Sprache Synthese-API gesprochen werden. Außerdem bietet es für viele Anwendungsfälle leistungsstarke, flexible programmatische API.