Привет, ребята? Сегодня мы узнаем кое-что удивительное — хотите знать что? хм….
Мы создаем простой веб-сайт для преобразования текста в речь с использованием ванильного JavaScript.
Создание простого веб-сайта с преобразованием текста в речь с использованием ванильного JavaScript может быть увлекательным и познавательным проектом. Используя JavaScript и API Web Speech, вы можете создать веб-сайт, который позволит пользователям вводить текст и читать его вслух синтетическим голосом. В этом блоге мы рассмотрим шаги по созданию простого веб-сайта с преобразованием текста в речь.
- Настройка HTML: начните с создания HTML-файла с формой, позволяющей пользователям вводить текст, и кнопкой для запуска преобразования текста в речь. Вот пример HTML-кода:
<!DOCTYPE html> <html> <head> <title>Simple Text-to-Speech Website</title> </head> <body> <form> <--Textarea will take input from user and pass it to Web Speech API--> <textarea id="textInput"></textarea><br><br> <--button with this ID will have eventlistener which will call Web Speech API--> <button id="speakButton">Speak</button> </form> </body> </html>
Примечание. Вы можете добавлять стили самостоятельно. Это не учебник по стилям.
2. Добавление JavaScript. Далее мы добавим код JavaScript в HTML-файл, чтобы веб-сайт работал. Код JavaScript будет использовать API Web Speech для создания объекта SpeechSynthesisUtterance, который будет содержать текст для произнесения. Затем код будет использовать метод window.speechSynthesis.speak()
для запуска преобразования текста в речь. Вот пример кода JavaScript:
<script> //Storing DATA From USER: const speakButton = document.getElementById('speakButton'); const textInput = document.getElementById('textInput'); //EventListener OnClick Event speakButton.addEventListener('click', function () { const utterance = new SpeechSynthesisUtterance(textInput.value); window.speechSynthesis.speak(utterance); }); </script>
3. Тестирование веб-сайта. Наконец, вы можете протестировать веб-сайт, открыв HTML-файл в браузере, поддерживающем Web Speech API, например в Google Chrome. При нажатии кнопки «Говорить» текст, введенный в текстовую область, должен быть прочитан вслух синтетическим голосом.
Вот и все! Вы успешно создали простой веб-сайт, преобразующий текст в речь, с использованием ванильного JavaScript. Вы можете расширить функциональность веб-сайта, добавив такие функции, как выбор определенного голоса или управление скоростью речи. Возможности безграничны.
В заключение, Web Speech API — это мощный инструмент, который можно использовать для создания различных приложений, связанных с речью, включая веб-сайты, преобразующие текст в речь. Обладая небольшим знанием JavaScript и творческим подходом, вы можете создать свой собственный веб-сайт с преобразованием текста в речь, чтобы добавить его в свое портфолио или просто для развлечения.
полный код ниже:
<!DOCTYPE html> <html> <head> <title>Simple Text-to-Speech Website</title> </head> <body> <form> <textarea id="textInput"></textarea><br><br> <button id="speakButton">Speak</button> </form> </body> <script> const speakButton = document.getElementById('speakButton'); const textInput = document.getElementById('textInput'); speakButton.addEventListener('click', function () { const utterance = new SpeechSynthesisUtterance(textInput.value); window.speechSynthesis.speak(utterance); }); </script> </html>
Хлопок для нас? :)
Команда Аршкод