Привет, ребята, сегодня я собираюсь показать вам, как вы можете преобразовать свой текст в речь, используя «React-Speech-Kit».
Этот модуль преобразует ваш текст в голос, и голос будет воспроизводиться в вашем веб-приложении. Этот модуль очень классный и помогает вам очень легко реализовать преобразование текста в речь по сравнению с ванильным javascript.

Давайте начнем….

Монтаж -

Сначала запустите эту команду в своем терминале, чтобы установить этот модуль.

npm i react-speech-kit

Затем импортируйте модуль

import { useSpeechSynthesis } from "react-speech-kit";

Затем объявите переменную с именем speak внутри фигурных скобок и присвойте значение хуку react useSpeechSynthesis().

const { speak } = useSpeechSynthesis();

Затем создайте кнопку, которая будет иметь метод onClick, который будет вызывать функцию стрелки, которая должна говорить, и мы будем передавать текст внутри нее, чтобы преобразовать текст в речь.

<button class='btn btn-primary btn-lg' 
onClick={() => speak({ text: 'Hello React Js' })}>
Speak
</button>

Когда вы нажмете эту кнопку, раздастся голос «Hello React Js».

Используя это с From-

Вы также можете ввести текст с помощью формы, а затем преобразовать текст в речь.

Пример -

import React from "react";
import { useSpeechSynthesis } from "react-speech-kit";
const Speech = () => {
const [value, setValue] = React.useState("");
const { speak } = useSpeechSynthesis();
return (
    <div className="speech">
    <div className="group">
        <h2>Text To Speech Converter Using React Js</h2>
    </div>
    <div className="group">
        <textarea
        rows="10"
        value={value}
        onChange={(e) => setValue(e.target.value)}
        ></textarea>
    </div>
    <div className="group">
        <button onClick={() => speak({ text: value })}>
        Speech
        </button>
    </div>
    </div>
);
};
export default Speech;

Когда вы пишете что-то в текстовом поле и нажимаете кнопку речи, текст, написанный внутри текстового поля, будет преобразован в речь, и будет воспроизводиться голос, говорящий текст, который вы написали в текстовом поле.

СПАСИБО, ЧТО ПРОЧИТАЛИ ЭТО ПОСТ, И ЕСЛИ ВЫ ОБНАРУЖИТЕ ЛЮБУЮ ОШИБКУ ИЛИ ХОТИТЕ ДАТЬ ЛЮБОЕ ПРЕДЛОЖЕНИЕ, ПОЖАЛУЙСТА, УКАЗАТЬ ОБ ЭТОМ В РАЗДЕЛЕ КОММЕНТАРИЙ.

Вы можете помочь мне пожертвованием по ссылке ниже Спасибо 👇👇

☕ — https://www.buymeacoffee.com/waaduheck

Также проверьте этот пост

https://dev.to/shubhamtiwari909/best-vs-code-extensions-for-web-development-2lk3

https://dev.to/shubhamtiwari909/auto-sizing-columns-in-css-grid-n16

https://dev.to/shubhamtiwari909/hover-effects-with-hovercss-52fd

https://dev.to/shubhamtiwari909/python-data-science-libraries-for-beginners-1bjp