API Text-2-Speech — Учебное пособие

Добавьте текст-2-речь на свой сайт

Это будет краткое руководство (если вам больше нравится Видео, вот ссылка). Откройте редактор кода и создайте файл HTML. Внутри просто определите базовый, HTML skeleton, и добавьте теги h1 и p, например так:

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Document</title>
  </head>
  <body>
    <h1>Hello World!</h1>
    <p>
      Lorem ipsum dolor sit amet consectetur, adipisicing elit. Exercitationem
      facere impedit eum perferendis ullam inventore quas vero cum similique.
      Voluptatum cupiditate eligendi beatae quos inventore omnis dolor, ullam
      recusandae maiores, cumque aspernatur. In fuga dignissimos officiis totam
      inventore vero natus possimus enim laudantium ullam numquam, laboriosam
      magnam nisi illum. Reiciendis.
    </p>
  </body>
</html>

Затем перейдите на ResponsiveVoice.org. Здесь мы получим Text2Speech API. Это также совершенно бесплатно, и вам не нужно добавлять информацию о кредитной карте :)

Выберите Войти.

Панель управления приложением.

Создайте учетную запись.

И скопируйте тег скрипта, который вы видите на экране.

Введите этот тег script перед </body>.

Затем создайте отдельный тег script. И добавьте responsiveVoice.speak("hello world");.

Ваш файл HTML должен выглядеть так:

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Document</title>
  </head>
  <body>
    <h1>Hello World!</h1>
    <p>
      Lorem ipsum dolor sit amet consectetur, adipisicing elit. Exercitationem
      facere impedit eum perferendis ullam inventore quas vero cum similique.
      Voluptatum cupiditate eligendi beatae quos inventore omnis dolor, ullam
      recusandae maiores, cumque aspernatur. In fuga dignissimos officiis totam
      inventore vero natus possimus enim laudantium ullam numquam, laboriosam
      magnam nisi illum. Reiciendis.
    </p>
    <script src="https://code.responsivevoice.org/responsivevoice.js?key=YOUR_UNIQUE_KEY"></script>
    <script>
      responsiveVoice.speak("hello world");
    </script>
  </body>
</html>

Теперь откройте браузер, и вы должны услышать Hello World.

Мы можем сделать это более динамичным. Вместо того, чтобы говорить "hello world", мы можем сказать что-то внутри нашего тега h1. Для этого напишите responsiveVoice.speak(document.getElementsByTagName("h1")[0].innerHTML)

Вы также могли заметить, что во второй раз, когда вы обновили страницу, заговорил другой голос. Вы также можете выбрать, какой голос будет говорить. Вот список всех голосов.

После того, как вы выбрали голос, вы можете добавить его в функцию responsiveVoice.speak после текста, responsiveVoice.speak(document.getElementsByTagName("h1")[0].innerHTML, "Spanish Male")

Смело экспериментируйте с этим!