курс от Брэда Трэверси
Возможности:
HTML
кнопка-переключатель для скрытия и отображения текстового поля
список вариантов выбора будет получен из API
значение textarea передается в текст сообщения при чтении
главная показывает список данных (изображения и текст)
CSS
скрыть текстовое поле за пределами верхней части клиентской страницы, а положение поворачивается вниз при добавлении списка классов
когда поле активно, появляется тень окна
и картинка помещается в коробку
сетка поле в основной части. четыре колонки и настройка адаптивного экрана
JS
получить необходимый DOM
данные изображений и текстовый массив
зациклить данные, чтобы получить изображение и текст, установить поле dom и classList, затем добавить в основной раздел
при нажатии на поле setTextMessage() и speanText(), а также для эффекта тени окна с активным именем класса
Для получения текста и языка с помощью API веб-речи.
новое сообщение о вводе текстового значения в качестве параметра
текст переходит в значение сообщения
SpeakText с помощью speecgSynthesis.speak()
все виды голосов хранятся в массиве.
получить голоса с помощью speechSynthesis.getVoices()
зацикливать каждый тип голоса и переходить к выбранным параметрам, включая имя и язык
когда голос изменился, getVoice()
при нажатии кнопки переключения скройте и отобразите текстовое поле с классом с именем show.
когда нажмите кнопку закрытия в текстовом поле, закройте окно, удалив имя класса шоу
при выборе изменения, что означает изменение языка, setVoice()
установить имя голоса на выбранное значение параметра
при нажатии кнопки чтения установите значение входного текста в текст сообщения и произнесите
Еще
еще одна демонстрация для этого веб-речевого API
