Привет, ребята? Сегодня мы узнаем кое-что удивительное — хотите знать что? хм….

Мы создаем простой веб-сайт для преобразования текста в речь с использованием ванильного JavaScript.

Создание простого веб-сайта с преобразованием текста в речь с использованием ванильного JavaScript может быть увлекательным и познавательным проектом. Используя JavaScript и API Web Speech, вы можете создать веб-сайт, который позволит пользователям вводить текст и читать его вслух синтетическим голосом. В этом блоге мы рассмотрим шаги по созданию простого веб-сайта с преобразованием текста в речь.

  1. Настройка 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>

Хлопок для нас? :)

Команда Аршкод