react text to speech

react-text-to-speech

Komponen React.js yang mudah digunakan yang memanfaatkan API Pidato Web untuk mengonversi teks menjadi ucapan.

Fitur

• Mengubah teks menjadi ucapan menggunakan API pidato web.
• Menyoroti kata -kata saat dibacakan dengan lantang. Melihat:
  • Menyoroti teks dengan hook useSpeech .
  • Menyoroti teks dengan komponen Speech .
• Menyediakan API untuk menangani kesalahan dan acara:
  • Penanganan kesalahan dengan hook useSpeech .
  • Penanganan kesalahan dengan komponen Speech .
• Mengelola beberapa instance pidato:
  • Beberapa contoh dengan hook useSpeech .
  • Beberapa contoh dengan komponen Speech .
• Sepenuhnya dapat disesuaikan untuk berbagai kasus penggunaan:
  • Menyesuaikan hook useSpeech .
  • Menyesuaikan komponen Speech .
• Mengatasi batas panjang teks API Pidato Web, memungkinkan input teks tak terbatas.
• Secara otomatis menghentikan instance pidato ketika komponen tidak melakukan gunung.

Instalasi

Instal react-text-to-speech menggunakan manajer paket pilihan Anda:

 # 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

Penggunaan

react-text-to-speech menyediakan dua metode utama untuk mengintegrasikan fungsionalitas teks-ke-pidato ke dalam aplikasi react.js Anda: hook useSpeech dan komponen <Speech> .

hook useSpeech

Penggunaan dasar

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

Penggunaan terperinci

Untuk detail lebih lanjut tentang penggunaan hook useSpeech , lihat dokumentasi.

Komponen <Speech>

Penggunaan dasar

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

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

Penggunaan terperinci

Untuk detail lebih lanjut tentang menggunakan komponen <Speech> , lihat dokumentasi.

Demo

Lihatlah demo langsung untuk melihatnya beraksi.

Dokumentasi

Jelajahi dokumentasi untuk memulai dengan cepat.

Menyumbang

Tunjukkan ❤️ dan dukungan Anda dengan memberikan GitHub. Anda juga dapat mendukung proyek dengan meningkatkan dan membaginya pada perburuan produk. Saran apa pun dipersilakan! Lihatlah panduan yang berkontribusi.

Lisensi

Proyek ini dilisensikan di bawah lisensi MIT.

Jelajahi solusi lain

React Speech Sorotan, bereaksi teks terhadap ucapan dengan menyoroti kata-kata dan kalimat yang diucapkan menggunakan file audio, API teks-ke-pidato, dan API sintesis pidato web. Juga menawarkan API program yang kuat dan fleksibel untuk banyak kasus penggunaan.