react text to speech

반응 텍스트-음성

웹 스피치 API를 활용하여 텍스트를 음성으로 변환하는 사용하기 쉬운 react.js 구성 요소.

특징

• 웹 음성 API를 사용하여 텍스트를 음성으로 변환합니다.
• 큰 소리로 읽을 때 단어를 강조합니다. 보다:
  • useSpeech 후크로 텍스트를 강조 표시합니다.
  • Speech 구성 요소로 텍스트를 강조 표시합니다.
• 오류 및 이벤트 처리를위한 API를 제공합니다.
  • useSpeech 후크로 오류 처리.
  • Speech 구성 요소로 오류 처리.
• 여러 음성 인스턴스를 관리합니다.
  • useSpeech 후크가있는 여러 인스턴스.
  • Speech 구성 요소가있는 여러 인스턴스.
• 다양한 사용 사례에 대해 완전히 사용자 정의 할 수 있습니다.
  • useSpeech 후크 사용자 정의.
  • 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-Steecch는 텍스트-음성 기능을 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!" /> ;
} 

자세한 사용

<Speech> 구성 요소 사용에 대한 자세한 내용은 문서를 참조하십시오.

데모

라이브 데모를 확인하여 작동하는 것을 확인하십시오.

선적 서류 비치

문서를 탐색하여 신속하게 시작하십시오.

기여하다

github를 제공하여 ❤️과 지원을 보여주십시오. 제품 헌트에서 프로젝트를 공유하여 프로젝트를 지원할 수도 있습니다. 모든 제안을 환영합니다! 기고 가이드를 살펴보십시오.

특허

이 프로젝트는 MIT 라이센스에 따라 라이센스가 부여됩니다.

다른 솔루션을 탐색하십시오

연설 하이라이트에 반응하고 오디오 파일, 텍스트 음성 API 및 웹 스피치 합성 API를 사용하여 사용되는 단어와 문장을 실시간으로 강조 표시하여 음성에 반응합니다. 또한 많은 사용 사례에 강력하고 유연한 프로그래밍 방식 API를 제공합니다.