react text to speech

react text to speech

Ai源碼

1.0.0

下載

反應文本到語音

一個易於使用的React.js組件，它利用Web語音API將文本轉換為語音。

特徵

使用網絡語音API將文本轉換為語音。
大聲朗讀單詞。看：
- 用useSpeech掛鉤突出顯示文字。
- 用Speech組件突出顯示文本。
為處理錯誤和事件提供了API：
- 使用useSpeech掛鉤處理錯誤。
- 使用Speech組件處理錯誤。
管理多個語音實例：
- 多個實例使用useSpeech掛鉤。
- 具有Speech組件的多個實例。
適用於各種用例的完全自定義：
- 自定義useSpeech掛鉤。
- 定制Speech組件。
克服Web語音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到Speech提供了兩種主要方法，將文本到語音功能集成到您的React.js應用程序中： useSpeech Hook和<Speech>組件。

`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!" /> ;
}