Русский
Русский
English
Статистика
Реклама

Cлайдер с голосовым управлением на JavaScript

Доброго времени суток, друзья!

Я тут слайдер написал с голосовым управлением, распознаванием текста и его чтением (озвучиванием) средствами браузера.



Функционал:

  • Смена слайдов по нажатию кнопок или стрелок на клавиатуре
  • Тоже самое по голосовым командам вперед и назад
  • Распознавание текста на изображении, запись текста в локальное хранилище и чтение текста голосом от Google по нажатию кнопки читать
  • Тоже самое по голосовой команде читать

Код проекта.

GitHub Pages.

В разработке использовалось следующее:

  • Web Speech API
  • Tesseract.js
  • Windows
  • Chrome
  • Visual Studio Code
  • Сервер
  • Рубаи Омара Хайяма изображения в формате png

WSAPI это интерфейс для распознавание речи пользователя (SpeechRecognition) и речевого воспроизведения текста (SpeechSynthesis):


Tesseract.js библиотека для распознавания текста с изображений.

Поддержка WSAPI на сегодняшний день оставляет желать лучшего, но, учитывая возможности этой технологии, можно быть уверенным в том, что более полная поддержка не заставит себя долго ждать:




Я не вижу смысла цитировать MDN и спецификацию.

К слову, спецификация хоть и написана на эзоповом языке, но не очень объемна, так что дерзайте. Однако имейте ввиду, что она имеет статус рабочего черновика, поэтому может сильно измениться в будущем.

Я старался писать самодокументируемый код, т.е. называть переменные и функции говорящими именами, не использовать сложных конструкций (даже от тернарников воздержался), длинных цепочек из вызовов методов, возвращающих промисы, и т.д. Насколько мне это удалось, судить Вам.

Отмечу парочку моментов, которые могут вызвать недоумение.

После включения звука необходимо подождать около 4 секунд до полной инициализации слушателя (тоже самое касается окончания чтения текста).

Обратите внимание на этот костыль:

if (voices.length !== 0) {    read()} else {    speechSynthesis.addEventListener('voiceschanged', () => {        getVoices()        read()    }, { once: true })}

Дело в том, что метод speechSynthesis.getVoices(), предназначенный для получения доступных голосов, при первом вызове возвращает пустой массив. Событие, которое при этом возникает (voiceschanged), срабатывает трижды. При втором озвучивании обработка указанного события приводит к тому, что текст читается дважды.

Для разработки нужен сервер или его эмуляция.

Для эмуляции сервера в VSC я использую расширение Preview on Web Server (открываем index.html нажимаем ctr+shift+L). В Brackets аналогичное расширение поставляется из коробки и запускается с помощью ctrl+alt+p.

В директории проекта лежит файл server.js. Этот файл содержит два варианта сервера на Node.js классический и Express.

Для запуска Express-сервера необходимо открыть терминал в директории проекта (в Windows правая кнопка мыши -> Открыть окно команд) и набрать следующее:

npm inpm i nodemon -g // менеджер изменений (опционально)nodemon server.js// илиnode server.js

После запуска сервер доступен по адресу http://localhost:8125/ или http://127.0.0.1:8125/.

Буду рад обратной связи. Благодарю за внимание.
Источник: habr.com
К списку статей
Опубликовано: 16.06.2020 08:19:40
0

Сейчас читают

Комментариев (0)
Имя
Электронная почта

Javascript

Программирование

Разработка веб-сайтов

Разработка

Webspeechapi

Speech synthesis

Speech recognition

Голосовое управление

Slider

Слайдер

Категории

Последние комментарии

  • Имя: Макс
    24.08.2022 | 11:28
    Я разраб в IT компании, работаю на арбитражную команду. Мы работаем с приламы и сайтами, при работе замечаются постоянные баны и лаги. Пацаны посоветовали сервис по анализу исходного кода,https://app Подробнее..
  • Имя: 9055410337
    20.08.2022 | 17:41
    поможем пишите в телеграм Подробнее..
  • Имя: sabbat
    17.08.2022 | 20:42
    Охренеть.. это просто шикарная статья, феноменально круто. Большое спасибо за разбор! Надеюсь как-нибудь с тобой связаться для обсуждений чего-либо) Подробнее..
  • Имя: Мария
    09.08.2022 | 14:44
    Добрый день. Если обладаете такой информацией, то подскажите, пожалуйста, где можно найти много-много материала по Yggdrasil и его уязвимостях для написания диплома? Благодарю. Подробнее..
© 2006-2022, personeltest.ru