Привет, ребята, сегодня я собираюсь показать вам, как вы можете преобразовать свой текст в речь, используя «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