#58 Читаем, подсвечиваем и скролим текст на Angular. С помощью TaigaUI и WebSpeechAPI
Вы любите читать и слушать статьи или книги, учить иностранный язык на удобных сервисах? А может вы поете в караоке? Классно когда ты слушаешь статью, а приложение подсвечивает тебе текущий абзац и слово, прокручивает страницу, если текст вышел за пределы страницы. Посмотрим как это можно реализовать с помощью TaigaUI и ng-web-apis/speech.
Сразу посмотрим, что мы будем делать. Gif не передает звук. Помимо выделения текущего абзаца и слова идет синхронное воспроизведение текста.
Web Speech API
API позволяет взаимодействовать с голосовыми интерфейсами в ваших веб приложениях. Web Speech API состоит из двух частей: SpeechSynthesis (Текст-в-Речь), и SpeechRecognition (Асинхронное распознавание речи). Нам потребуется первое — SpeechSynthesis.
Для удобной работы воспользуемся Web APIs for Angular. Это удобный набор библиотек над нативным API браузера. Нам потребуется пакет speech.
Taiga UI
Это больше чем библиотека компонентов, это конструктор Lego, который состоит из нескольких слоев. Можно подключить нужный приложению слой и на базе него создать нужную функциональность. Из тайги был взят TuiScrollService — cервис для плавной прокрутки, он входит в состав CDK. Идея подсветки текста была основана на реализации tui-highlight, но она не совсем подходит по функционалу, поэтому будем делать свою похожую директиву.
Реализация
Идея состоит в том, что нам нужно соединить SpeechSynthesis и будущую highlight директиву. Для этого мы воспользуемся waTextToSpeechBoundary, который отдает информацию о текущем состоянии синтеза речи. Нам потребуется два параметра оттуда: charIndex — это индекс текущей позиции в тексте и charLength — длина текущего слова. Имея данные о текущем тексте для чтения, текущем индексе и длине слова мы можем подсветить нужную область.
Создадим highlight директиву
Директива будет работать достаточно просто. На вход она принимает данные об индексе и длине слова. При обновлении данных при помощи TreeWalker происходит поиск текста в dom дереве. После нахождения текста создается элемент с абсолютным позиционированием. Далее высчитывается позиция элемента-хайлайтера, его длина и ширина. Код представлен ниже.
Реализуем чтение и прокрутку текста
Для этого будем использовать следующие ингредиенты. ElementRef — ссылка на область, которая должна прокручиваться. QueryList ссылки для списка элементов в которых расположены тексты. Будем отслеживать текущий абзац для чтения, если абзац закончен, то нужно прокрутить область на высоту текущего элемента из QueryList. Плавной прокруткой займется TuiScrollService.
Мы реализовали то, что хотели. Если у вас есть идеи по интерактивным компонентам, пишите в комментариях я попробую их сделать.
Материалы и ссылки
Записывайтесь на курсы школы ИТ лидеров https://growleader.ru
Исходники можно скачать тут.
Записывайтесь на курс разработке компонентов на Angular. Обучение проходит на новой образовательной платформе solvery.
Подписывайтесь на мой канал телеграм о фронтенде, ui и ux front_ui_ux.
Ставьте клапы и подписывайтесь, ведь это приятно и мотивирует на новые материалы!
