react text to speech

反応 - スピーチ

Web Speech APIを活用してテキストをスピーチに変換する使いやすいReact.jsコンポーネント。

特徴

• Web Speech APIを使用してテキストをスピーチに変換します。
• 声を出して読まれた言葉を強調します。見る：
  • useSpeechフックでテキストを強調表示します。
  • Speechコンポーネントを使用したテキストの強調表示。
• エラーとイベントを処理するためのAPIを提供します。
  • useSpeechフックでのエラー処理。
  • Speechコンポーネントでのエラー処理。
• 複数の音声インスタンスを管理する：
  • useSpeechフックを備えた複数のインスタンス。
  • Speechコンポーネントを備えた複数のインスタンス。
• さまざまなユースケースに完全にカスタマイズできます：
  • useSpeechフックのカスタマイズ。
  • Speechコンポーネントのカスタマイズ。
• Web Speech APIのテキスト長い制限を克服し、無限のテキスト入力を有効にします。
• コンポーネントがマウントされていないときに、音声インスタンスを自動的に停止します。

インストール

希望するパッケージマネージャーを使用して、 react-text-to-speechをインストールします。

 # 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

使用法

React-Text-to-Speechは、 Text-to-Speech機能useSpeech React.jsアプリケーション<Speech>統合するための2つの主要な方法を提供します。

useSpeechフック

基本的な使用法

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

詳細な使用法

useSpeechフックの使用の詳細については、ドキュメントを参照してください。

<Speech>コンポーネント

基本的な使用法

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

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

詳細な使用法

<Speech>コンポーネントの使用の詳細については、ドキュメントを参照してください。

デモ

ライブデモをチェックして、それを実行しているのを見てください。

ドキュメント

すぐに開始するためにドキュメントを調べてください。

貢献する

githubで授与して、あなたの❤️とサポートを見せてください。また、Product Huntでプロジェクトを上昇させて共有することで、プロジェクトをサポートすることもできます。どんな提案も大歓迎です！寄稿ガイドをご覧ください。

ライセンス

このプロジェクトは、MITライセンスの下でライセンスされています。

他のソリューションを調べてください

反応音声のハイライト、テキストへの反応テキストは、オーディオファイル、テキストツースピーチAPI、およびWeb Speech Synthesis APIを使用して話されている単語と文をリアルタイムで強調表示します。また、多くのユースケースに対して強力で柔軟なプログラムAPIを提供します。