react text to speech

React-Text-To Speek

Простой в использовании компонент react.js, который использует API веб-речи для преобразования текста в речь.

Функции

• Преобразует текст в речь, используя API веб -речи.
• Выделяет слова, как они читаются вслух. Видеть:
  • Выделив текст с помощью крючка useSpeech .
  • Выделение текста с Speech компонентом.
• Предоставляет API для обработки ошибок и событий:
  • Ошибка обработки с useSpeech Hook.
  • Обработка ошибок с помощью Speech компонента.
• Управляет несколькими экземплярами речи:
  • Несколько случаев с useSpeech Hook.
  • Несколько случаев с Speech компонентом.
• Полностью настраивается для различных вариантов использования:
  • Настройка useSpeech Hook.
  • Настройка Speech компонента.
• Преодолевает ограничение длины текста веб -речи, обеспечивая бесконечный текстовый ввод.
• Автоматически останавливает экземпляры речи, когда компонент наносит на нет компонент.

Установка

Установите 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 предоставляет два основных метода для интеграции функциональности текста в речь в ваши приложения react.js: крючок useSpeech и компонент <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 Hook, см. Документацию.

<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 для многих вариантов использования.